资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Vue中CSS动画的原理是什么

这篇文章将为大家详细讲解有关 Vue中CSS动画的原理是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

成都创新互联主营聂拉木网站建设的网络公司,主营网站建设方案,成都app软件开发,聂拉木h5小程序开发搭建,聂拉木网站营销推广欢迎聂拉木等地区企业咨询

Vue中CSS动画的原理是什么

(显示的过程:在动画即将被执行的瞬间,会往div上增加两个class名:fade-enter、fade-enter-active。然后去掉fade-enter,增加fade-enter-to。接着动画继续执行,到结束的瞬间,会把最后两个class去掉。)

Vue中CSS动画的原理是什么

(隐藏的过程)

为啥style标签里的class以fade开头呢?因为我在transition取名就是fade。如果不取名,默认是v(例如:v-enter、v-enter-active):




    
    
    
    
    
        .fade-enter {
            opacity: 0
        }
        .fade-enter-active {
            transition: opacity 3s;
        }
        .fade-leave-to {
            opacity: 0
        }
        .fade-leave-active {
            transition: opacity 3s;
        }
    


    
        //name随便取名:
        
            hello
                 切换     
             var vm = new Vue({             el: "#root",             data: {                 show: true             },             methods: {                 handleClick: function() {                     this.show = !this.show                 }             }         });     

关于 Vue中CSS动画的原理是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


本文标题:Vue中CSS动画的原理是什么
文章转载:http://cdkjz.cn/article/gsgojp.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220