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

实现多个元素的过渡动画的效果

    
           Vue 中多个元素或组件的过渡动画       
            
           
              
       
        Hello World
       
        
       
        Bye World

输出：点击--- Hello World 逐渐隐藏（1s），Bye World 直接出现---再次点击--- Bye World 逐渐隐藏，Hello World 直接出现

防止 Vue 中 div 出现复用，添加不同的 key值


             
      
       Hello World
      
        
      
       Bye World

Vue 还提供 mode 配置参数设置多个属性切换时的效果

（in-out : 多个元素显示时，先显示的元素先进入，要隐藏的元素才会被隐藏；）


           
              
       
        Hello World
       
        
       
        Bye World

输出：点击--- Bye World 逐渐出现（1s）Hello World才隐藏---再次点击--- Hello World 逐渐出现（1s），Bye World 才隐藏

（out-in : 多个元素显示时，要隐藏的元素先隐藏，要显示的元素先进入；）


             
      
       Hello World
      
        
      
       Bye World

输出：点击--- Hello World逐渐隐藏（1s）Bye World 出现---再次点击--- Bye World 逐渐隐藏（1s）， Hello World才出现

实现多个组件的过渡动画的效果

代码：

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

输出：点击--- child逐渐隐藏（1s）child-one 出现---再次点击--- child-one 逐渐隐藏（1s）， child才出现

通过动态组件来实现

component 来定义动态组件，通过 is 属性来将组件和定义的组件名做绑定，来控制执行那个组件

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

输出：点击--- child逐渐隐藏（1s）child-one 出现---再次点击--- child-one 逐渐隐藏（1s）， child才出现

methods:{            handleClick:function(){                this.type = this.type === 'child' ? 'child-one' : 'child'                         }

判断type 是否为 child ，如果是则赋值为 child-one,不是则赋值为 child