Vue-動畫效果

1.vue中動畫效果可以手寫也可以通過外掛實現，下面介紹一下兩種方式的使用。

(1).手寫
手寫，需要自己寫好樣式

v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。

v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。

v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。

v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。

v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。

v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。

以上是使用css過渡時，所需要定義的類名，一般是使用v-enter-active, v-enter,
v-leave-active,v-leave-to.這四個類名。
v-是預設的字首，可以自定義，如： fide-enter-active
使用時：

<transition  name='定義的名稱'>
		//需要動畫過渡的標籤
</transition>
此處name屬性就是過渡類名的字首： fide

也可以使用javascript 鉤子來進行動畫展示：

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ...需要動畫過渡的標籤 -->
</transition>

/*vue元件中*/
methods: {
  // --------
  // 進入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回撥函式 done 是可選的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 離開時
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回撥函式 done 是可選的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用於 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}


這些方法中el引數就是，transition標籤所包裹著，需要動畫過渡效果的標籤。可以使用el對該標籤直接進行樣式操作。如下：
el.style.opacity=0;    //透明度設定為0
 

推薦使用外掛實現。
2.使用官網推薦的animate 外掛。
使用方法：

<transition   enter-active-class='animated 外掛中的類名'     leave=active-class='animated  外掛'>
	...
</transition>

這樣就設定了，進入和離開的過渡動畫了。