animate.css提供了丰富的动画效果，vue提供了transition过渡效果的封装组件。将vue和animate.css结合，就算不熟悉css3的动画，也能够实现动画效果。下面介绍他们两个如何结合使用。
1. 首先安装animate.css库。
$ npm install animate.css --save
2. animate.css的使用
安装Animate.css，并引入import 'animate.css'后，将animate__animated类加到元素class，再添加动效animation names、延时、速度、循环等类名。
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
控制延时：
animate__delay-2s
animate__delay-3s
animate__delay-4s
animate__delay-5s
控制速度：
animate__slow//2s
animate__slower//3s
animate__fast//800ms
animate__faster//500ms
控制重复:
animate__repeat-1
animate__repeat-2
animate__repeat-3
animate__infinite
3. 在vue中使用
Vue 提供了 transition 的封装组件，使用v-if、v-show时，可以为元素或者组件添加过度效果。
transition组件提供如下属性：
enter-active-class定义元素进入时的过渡效果。leave-active-class定义元素离开的过渡效果。将组件包含在<transition>组件中，将动效类名放到enter-active-class或leave-active-class属性即可。
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
<p v-if="show">hello</p>
</transition>
前端工程师