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>