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>