当前位置：文江博客话题详情

vue CSS过渡和CSS动画

发布于 2022-09-12 13:58:59 字数 291 浏览 15 评论 0

官方文档里面提到了这个

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那请放手 2022-09-19 13:58:59

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

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

回复收藏 0