Vue_多个元素或组件的过渡

一.多元素动画
如果transition标签里有多个元素做动画，比如做个toggle切换的效果。

<transition 
      name='fade'
      mode='in-out'>
   <div v-if="cssanimate" key='hello'>hello css animate5</div>
   <div v-else key='bye'>Bye css animate5</div>
</transition>
   <button @click='cssclick'>css动画5</button>
    //mode：来设置多个属性切换时的效果，in-out显示的元素先进来，
    //隐藏的元素后隐藏,out-in隐藏的元素先隐藏，显示的元素再显示

那可能会出现没有动画效果的情况，这是因为DOM元素的复用导致的，不复用可以用在元素上加key值

我们也可以给transition加上mode属性，mode属性的作用是：
mode：来设置多个属性切换时的效果，in-out显示的元素先进来，隐藏的元素后隐藏, out-in隐藏的元素先隐藏，显示的元素再显示
二.在组件中如何使用过渡？

  <transition 
     name='fade'
     mode='in-out'>
     <child-one v-if='cssanimate'></child-one>
     <child-two v-else></child-two>
 </transition>
   <button @click='clickanimate'>css动画</button>

可以这样写，也可以用组件来判断

<transition 
     name='fade'
     mode='in-out'>
   <component :is='showcomponents'></component>
 </transition>
   <button @click='clickanimate'>css动画</button>

methods:{
  clickanimate:function(){
    this.showcomponents = this.showcomponents == 'childone'?'childtwo':'childone'
 },
}