vue CSS过渡和CSS动画

官方文档里面提到了这个

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

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

阅读 2k

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

<!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属性相同的放在同一个数组？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

Next.js做纯前端是否可行？

如何在Vue中点击菜单弹出v-dialog对话框？

请问开发React Native，一般是推荐哪个主流的UI库呢？

如何防止接口的 key 泄露?

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？