vue使用Animate.css动画

Vue动画库插件animate
git地址：https://github.com/daneden/animate.css
演示地址：https://www.dowebok.com/demo/2014/98/

如何在vue项目中使用呢
一、安装

npm install animate.css --save

二、使用

<!--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>