平武建站

Vue中多个元素或组件的过渡

bye

切换

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

(像上面这种加了style并不会实现渐变效果，因为vue默认是会尽量复用dom，想要vue不复用dom，要给其加上不同的key值)

专注于为中小企业提供成都网站建设、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业尼金平免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

加上不同key值后，渐变效果有了：

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

如果想设置多个属性之间的切换效果，可以用mode（mode="in-out"：先显示要显示的再隐藏要隐藏的。mode="out-in"：和前面的相反）：




    
    
    
    
    
    


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

组件动画也是可以的（不需要上面的不同值的key）：




    
    
    
    
    
    


    
        
            hello
            bye
        
        切换
    
    
        Vue.component("child1", {
            template: "child1"
        });
        Vue.component("child2", {
            template: "child2"
        });
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function() {
                    this.show = !this.show
                }
            }
        });

动态组件的实现方法：




    
    
    
    
    
    


    
        
            //通过动态组件的方式实现：
            
        
        切换
    
    
        Vue.component("child1", {
            template: "child1"
        });
        Vue.component("child2", {
            template: "child2"
        });
        var vm = new Vue({
            el: "#root",
            data: {
                type: "child1"
            },
            methods: {
                handleClick: function() {
                    this.type = this.type == "child1" ? "child2" : "child1"
                }
            }
        });

分享标题：Vue中多个元素或组件的过渡
本文链接：http://pwwzsj.com/article/jchocc.html

其他资讯