vue CSS过渡和CSS动画

官方文档里面提到了这个

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

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

阅读 1.9k

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

<!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="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>

vue CSS过渡和CSS动画

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？