Vue C3動畫 vue2-animate

　　最近寫vue的項目，需要添加一個動畫，首先想到的就是jQuery中常用的第三方庫，animate，但是這個不是能完全兼容的，需要自己做處理。然后就在晚上尋找Vue版本的動畫庫，然后就找到了這個vue2-animate。網上的教程還是不少的，然后demo能直接運行，但是他們有一點沒有寫的很明白，就是在添加enter-active-class或leave-active-class屬性的時候。官方的文檔寫了，需要加入-enter/-leave，或者加入In或者Out

請看官方的英文原文：

Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use Custom Transition Classes, you can either add -enter/-leave to the classes:

<transition
  name="custom-classes-transition"
  enter-active-class="bounceLeft-enter"
  leave-active-class="bounceRight-leave"
>
  <p v-if="show">hello</p>
</transition>

Or use the regular In/Out syntax:

<transition
  name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight"
>
  <p v-if="show">hello</p>
</transition>

　　最后說一下他的使用方法，很簡單的：

(c)npm install --save vue2-animate

然后再你的main.js中添加上css的引入

import 'vue2-animate/dist/vue2-animate.min.css'

或者官方說了，

require('vue2-animate/dist/vue2-animate.min.css')

都是可以的，然后，你想要實現動畫的元素上面，需要包裹一層 transition 標簽。然后再name屬性定義是使用具體什么類型的動畫，然后enter-active-class和leave-active-class 屬性添加對應的動畫class名， 記住動畫class名，要加上In或者Out

　　下面是常見的動畫名稱：

Bounce

• bounce
• bounceDown
• bounceLeft
• bounceRight
• bounceUp

Fade

• fade
• fadeDown
• fadeDownBig
• fadeLeft
• fadeLeftBig
• fadeRight
• fadeRightBig
• fadeUp
• fadeUpBig

Flip

• flip
• flipX
• flipY

Rotate

• rotate
• rotateDownLeft
• rotateDownRight
• rotateUpLeft
• rotateUpRight

Slide

• slideDown
• slideLeft
• slideRight
• slideUp

Zoom

• zoom
• zoomDown
• zoomLeft
• zoomRight
• zoomUp

LightSpeed

• lightSpeed

最后肯定是要放上官網的鏈接的：https://www.npmjs.com/package/vue2-animate#custom-transition-classes
另一個鏈接是VUE過渡的鏈接:https://cn.vuejs.org/v2/guide/transitions.html