在VUE中使用CSS動畫animate.css動畫(持續更新)

官方連接 https://github.com/daneden/animate.css

英文的，因此本身總結下：

官方說明：

$('#yourElement').addClass('animated bounceOutLeft');

可是在vue中步驟以下

安裝  npm install animate.css --save安裝，在引入

首先查到的是這種方式，引入

// import animated from 'animate.css'

// Vue.use(animated)

最後改用這種比較好，在須要的地方引入下

// 直接在須要的位置進行引入 import @'../../node_modules/animate.css/animate.css'

使用的時候也簡單,只須要管開始效果 enter-active-class 和 結束效果 leave-active-class

網上樣例以下，已經測試驗證過

<div id="box">
            <!-- 控制數據的值切換顯示隱藏 -->
            <button @click="show=!show">點我展現效果</button>
            
            <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
              <p v-show="show" class="animated"></p>
            </transition>
          
            <!-- 第二種方法 -->
            <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
              <p v-show="show"></p>
            </transition> -->
          
            <!-- 多元素運動 -->
            <!-- <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
              <p v-show="show" class="animated" :key="1"></p>
              <p v-show="show" class="animated" :key="2"></p>
            </transition-group> -->
          </div>

 

標綠爲已經驗證的，直接替換須要就能夠了，對於後端來講這些暫時應該夠用了

<div class="div001">
          <button @click="show2=!show2">點我展現效果</button>
            
          <transition enter-active-class="rotateIn" leave-active-class="rotateOut">
            <p v-show="show2" class="animated">
              <img src="@/assets/image/img_01.jpg" style="height:200px;width:auto;"  alt="">
            </p>
          </transition>
          
        </div>

 

bounce                   彈跳，反彈，彈起
flash                    閃現，一瞬間，反射
pulse                    跳動，脈衝，脈跳
rubberBand               橡皮圈，橡皮帶
shake                    搖動，震動
swing                    旋轉，懸掛，搖擺
tada                     時間，波幅範圍
wobble                   擺動， 搖晃，不穩定
jello                    凝聚
bounceIn                 放大彈跳，
bounceInDown             從上面跳跳來
bounceInLeft             從左邊出現
bounceInRight            從右邊出現
bounceInUp               從下面上來
bounceOut                從上面下去
bounceOutDown            從原來的位置跳下去
bounceOutLeft            從原來的位置跳到左邊去
bounceOutRight           從原來的位置跳到右邊去
bounceOutUp              從原來的位置跳到上面去
fadeIn                   總體漸入，淡淡的隱現
fadeInDown               從上向下漸入    
fadeInDownBig            從上向下直接滑動下來
fadeInLeft               從左向右漸入
fadeInLeftBig            從左向右直接滑動
fadeInRight              從右向左漸入
fadeInRightBig           從右向左直接滑動
fadeInUp                 從下向上漸入
fadeInUpBig              從下向上直接滑動
fadeOut                  漸出
fadeOutDown              從上向下漸出
fadeOutDownBig           從上向下直接滑動出去
fadeOutLeft              從左向右漸出
fadeOutLeftBig           從左向右直接滑動出去
fadeOutRight             從右向左漸出
fadeOutRightBig          從右向左直接滑動出去
fadeOutUp                從下向上漸出
fadeOutUpBig             從下向上直接滑動出去
flipInX                  水平翻轉呈現
flipInY                  垂直翻轉呈現
flipOutX                 水平翻轉消失
flipOutY                 垂直翻轉消失
lightSpeedIn             輕輕的呈現 傾斜
lightSpeedOut          輕輕的消失 傾斜 rotateIn                 旋轉呈現 rotateInDownLeft         從左向右轉動漸入 從上向下轉動            轉動:沒有旋轉到一週  rotateInDownRight        從右向左轉動漸入 從上向下轉動            轉動:沒有旋轉到一週   rotateInUpLeft           從右向左轉動漸入 從下向上轉動 rotateInUpRight          從左向右轉動漸入 從下向上轉動            轉動:沒有旋轉到一週           rotateOut                旋轉消失 rotateOutDownLeft        從左向右轉動漸出 從上向下轉動            轉動:沒有旋轉到一週  rotateOutDownRight       從右向左轉動漸出 從上向下轉動            轉動:沒有旋轉到一週  rotateOutUpLeft          從右向左轉動漸出 從下向上轉動            轉動:沒有旋轉到一週  rotateOutUpRight         從左向右轉動漸出 從下向上轉動            轉動:沒有旋轉到一週  hinge                    定點轉動 rollIn                   翻滾旋轉漸入                              旋轉：轉動一週 rollOut                  旋轉漸出                              旋轉：轉動一週 zoomIn                   放大漸入 zoomInDown               從上向下出現同時放大 zoomInLeft               從右向左出現同時放大 zoomInRight              從左向右出現同時放大 zoomInUp                 從下想上出現同時放大 zoomOut                  縮小漸出 zoomOutDown              從上向下消失同時縮小 zoomOutLeft              從右向左消失同時縮小 zoomOutRight             從左向右消失同時縮小 zoomOutUp                從下向上消失同時縮小 slideInDown              從上向下滑動 slideInLeft              從右向左滑動 slideInRight             從左向右滑動 slideInUp                從下向上滑動 slideOutDown             從原來的位置向下滑動 slideOutLeft             從原來的位置從左滑動 slideOutRight            從原來的位置向右滑動 slideOutUp               從原來的位置向上滑動