vue动画效果

1 v-enter
定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：
定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to:
2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave:
定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：
定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to:
2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
常用的过渡都是使用 CSS 过渡。

第三方插件animate.css
1.先下载安装第三方插件
npm install animate.css

2.引入动画样式
全局引入的话写到main.js文件中
import ‘animate.css/animate.css’

3.在目标元素外部添加过渡标签transition

enter-active-class=‘bounceInDown animated’
leave-active-class=‘slideOutRight animated’>

4.如果目标元素是多个时需要用transition-group标签，而且目标元素上需要加上key值

5.进入name-enter name-enter-to name-enter-active
6.离开name-leave name-leave-to name-leave-active