Vue2.0 Transition的常见用法

先来看官网给的经典例子：

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

效果是点击按钮hello会淡入淡出（这里不演示了，例子地址：https://vuefe.cn/v2/guide/transitions.html）：

fade-enter和fade-leave-to类设置CSS为opacity:0，说明过渡刚进入和离开的时候透明度为0，即不显示。

四个属性说明：

• fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
• fade-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
• fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
• fade-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除；

从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。