vue CSS过渡和CSS动画

中天 • • 问答 • 651 阅读

官方文档里面提到了这个

我对照这个图，个人理解是vue中css动画的v-enter类名会在动画执行过程中一直在目标dom的标签里面，直到结束动画触发animationed事件时候这个v-enter类名才会消失？是这个意思吗？

还是不太懂，哪位大神能给我举个实际的可以看得到效果的例子解释一下，非常感谢！

回答

举个自定义动画例子给你看一下，你就明白了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .content{
                width: 200px;
                height: 200px;
                background: skyblue;
            }
            
            .fade-enter-active, .fade-leave-active {
              transition: opacity 5s;
            }
            .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
              opacity: 0;
            }
            
            
            .slide-enter-active{
              transition: all 3s;
            }
            .slide-leave-active {
              transition: all 5s;
            }
            .slide-enter, .slide-leave-to /* .fade-leave-active below version 2.1.8 */ {
                transform: translateX(500px);
                opacity: 0;
            }
        </style>
        <script src="https://segmentfault.com/q/1010000038920289/js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div>
            <!-- 
                属性NAME会跟框架追加的类名一致
             -->
            <transition name="slide">
             <div v-if="isShow"></div>
            </transition>
            <button @click="toggleEvent">切换内容</button>
        </div>
        <script type="text/javascript">
            let app = new Vue({
                el:"#app",
                data:{
                    isShow:true
                },
                methods:{
                    toggleEvent:function(){
                        this.isShow = !this.isShow
                    }
                }
                
            })
            
            
        </script>
        
    </body>
</html>

可以自己用chrome调试工具里面的animation调试看看

以上是vue CSS过渡和CSS动画的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>