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:

1 <transition
2   name="custom-classes-transition"
3   enter-active-class="bounceLeft-enter"
4   leave-active-class="bounceRight-leave"
5 >
6   <p v-if="show">hello</p>
7 </transition>

Or use the regular In/Out syntax:

1 <transition
2   name="bounce"
3   enter-active-class="bounceInLeft"
4   leave-active-class="bounceOutRight"
5 >
6   <p v-if="show">hello</p>
7 </transition>

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

1 (c)npm install --save vue2-animate

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

1 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