动画——Vue中的动画封装-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

动画——Vue中的动画封装

封装动画让代码可复用

在五家渠等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站设计、网站建设网站设计制作按需制作,公司网站建设,企业网站建设,成都品牌网站建设,营销型网站建设,成都外贸网站建设,五家渠网站建设费用合理。

如下是一个简单的点击渐变、渐隐：




    
    
    
    
    
    
        /*因为没有给它命名，所以用默认v开头的class名*/
        .v-enter, .v-leave-to {
            opacity: 0;
        }
        .v-enter-active, .v-leave-active {
            transition: opacity 1s;
        }
    


    
        //性能考虑，尽量不用index作为key值 

        
            hello

toggle

var vm = new Vue({ el: "#root", data: { show: true }, methods: { handBtnClick: function() { this.show = !this.show } } });

封装后：




    
    
    
    
    
    
        /*因为没有给它命名，所以用默认v开头的class名*/
        .v-enter, .v-leave-to {
            opacity: 0;
        }
        .v-enter-active, .v-leave-active {
            transition: opacity 1s;
        }
    


    
        
            hello world
        
        
            hello world
        
        toggle

Vue.component("fade", { props: ["show"], template: `

` }); var vm = new Vue({ el: "#root", data: { show: true }, methods: { handBtnClick: function() { this.show = !this.show } } });

其实css也可以封装：可以不用css动画，而用js动画：




    
    
    
    
    
    
        /*因为没有给它命名，所以用默认v开头的class名*/
        .v-enter, .v-leave-to {
            opacity: 0;
        }
        .v-enter-active, .v-leave-active {
            transition: opacity 1s;
        }
    


    
        
            hello world
        
        
            hello world
        
        toggle

Vue.component("fade", { props: ["show"], template: `

`, methods: { handleBeforeEnter: function(el) { el.style.color = "red" }, handleEnter: function(el, done) { setTimeout(()=>{ el.style.color = "green" done() //再次注意：要记得done() }, 1000) } } }); var vm = new Vue({ el: "#root", data: { show: true }, methods: { handBtnClick: function() { this.show = !this.show } } });

（这种封装可以完整的将css、js、html都封装在一个组件中。推荐）

分享名称：动画——Vue中的动画封装
转载来源：http://scgulin.cn/article/igcgej.html

新闻中心

hello world

hello world

其他资讯