Vue中多个元素或组件的过渡-创新互联

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

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

    
    
    
    
    
    


    
        
            hello
            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"
                }
            }
        });
    

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。