1.transition
需要進行過渡/動畫處理的元素，用<transition>標簽嵌套，在css過渡和動畫中自動應(yīng)用相關(guān)的class類名。
過渡類名：
v-enter 進行開始
v-enter-active 進行中
v-enter-to 進行結(jié)束
v-leave 離開開始
v-leave-active 離開中
v-leave-to 離開結(jié)束
v表示transition中的屬性name的值。

圖1.png

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

<style scope>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

css動畫和過渡的區(qū)別：
動畫中 v-enter 類名在節(jié)點插入 DOM 后不會立即刪除，而是在 animationend 事件觸發(fā)時刪除。