Vue動畫庫插件animate

git地址：https://github.com/daneden/animate.css

1.進入Vue項目目錄

2.npm install animate.css --save:編碼安裝

安裝完成后，會在項目的package.json文件中顯示animate.css插件，如下：

  "dependencies": {
    "animate.css": "^3.7.2",
    "moment": "^2.24.0",
    "shortid": "^2.2.15",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

 3.直接在標簽中使用動畫樣式即可，如下：

<!--Vue中，要做動畫或者過渡都需要加一個transition標簽-->
<!--enter-active-class="animated tada"，進入生效動畫直接使用animated中的tada樣式-->
<!-- leave-active-class="animated bounceOutRight" ，離開生效動畫直接使用animated中的bounceOutRight樣式-->
<!--:duration="{enter:1000,leave:500}",表示持續時間，進來花費1000毫秒，出去花費500毫秒-->
<transition
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRigh"
  :duration="{enter:1000,leave:500}"
>
  <!--使用冒號動態綁定src地址，否則不會識別pic-->
  <!--v-if決定是否顯示-->
  <img v-if="flag" :src="pic" alt="">

</transition>