vue 結合 animate.css

 這裏說的是vue2.0和animate.css的結合使用。其實用過就知道用法是比較簡單的。可是就是剛開始使用的時候，不免有的會遇到各類問題。簡單的說說我所用過而且遇過的坑。

    首先是transition組件，在2.0中由transition屬性變成了一個獨立的組件。

   用法：

   一、

     要用animate.css，那麼首先須要作的就是導入它。局部的導入的話，就在當前的.vue文件中的style標籤中導入：@import "animate.css";   注意，導入css文件的時候。在末尾應該是要加上分號的。若是不加的話，會影響後面寫的局部樣式

 二、

  開始使用animate.css

   

 

 上述是一個完整的結構。其中重要的幾個點用箭頭表示出來。首先在transition組件內部，須要定義兩個基本的class類，表示過渡進來和過渡出去的時候所要配合使用的animate.css的類值。zoomInLeft/zoomOutRight是其中的一對兒。具體的其餘效果能夠查看animate.css的官網。其次在transition組件內部的話，須要過渡的子元素須要加上animated類。最後可能也是比較容易忽略的點（至少我就是）。這個v-show,看似好像是多餘的，可是不加上的話，對於過渡效果是沒有用的。由於過渡 是從一個無到有或者有到無的一個效果。最開始進來的時候若是元素自己就是show的，那麼過渡就失效了。因此在元素上面須要加上這個v-show屬性。在過渡效果進來的時候，v-show設置爲true，相反爲false。

還有一點是在上述代碼中沒有展示出來的，若是有多個子元素都要實現過渡，能夠加上<transition-group></transition-group>進行包裹。