炫意html5
最早CSS3和HTML5移动技术网站之一

vue CSS过渡和CSS动画

官方文档里面提到了这个

我对照这个图,个人理解是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 id="app">
            <!-- 
                属性NAME会跟框架追加的类名一致
             -->
            <transition name="slide">
             <div v-if="isShow" class="content"></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调试看看

炫意HTML5 » vue CSS过渡和CSS动画

CSS3教程HTML5教程