动画模式

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。

• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<div id="app">    
  <transition name="fade" mode="out-in">        
    <button v-if="!flag" @click="flag=!flag" :key="'off'">off</button>
    <button v-if="flag"  @click="flag=!flag" :key="'on'">on</button>
  </transition>   
</div>

new Vue({
  el:"#app",
  data:{flag:true}
})

@keyframes fadeIn{
  0%{ opacity: 0;}       
  100%{opacity: 1;}
}
@keyframes fadeOut{
  from{ opacity: 1;}
  to{opacity: 0;}
}
.fade-enter-active{
  animation: fadeIn .7s ease;
}
.fade-leave-active{
  animation: fadeOut .2s ease;
}