Vue动画

1. 使用过渡类名实现动画。

v-enter 、 v-leave-to：它们是一个时间点。分别表示元素进入之前和元素离开之后的状态，一般这两个状态相同。

v-enter-to 、 v-leave：它们是一个时间点。分别表示元素进入完成之后的状态和离开的初始状态，一般这两个状态相同。

v-enter-active 、 v-leave-active：它们是一个时间段。分别表示入场动画的时间段和离场的时间段。

注意：需要使用 transition 元素，把需要被动画控制的元素，包裹起来。

        如果需要自定义过渡类名，则需要给transition添加name属性，然后将v-换成name的属性值-即可，比如：my-enter-to

 

2. 使用第三方类实现动画，比如animate.css

（1）设置相应的类的属性

（2）使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长，使用 :duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场的时长

<transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
    <h3 v-if="flag" class="animated">这是一个H3</h3>
</transition> 

 

3.使用钩子函数

vue官网-动画钩子函数

注意：

（1）在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup

（2）如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性

（3）给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果

（4）通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签