Day17 动画介绍

概述
Vue提供了transition元件,在DOM中新增、删除、更改时提供了多种应用过渡效果,可以加入进入(Enter)离开(Leave)和转换(Transition)的效果

使用方法

• 条件渲染(v-if)
• 条件显示(v-show)
• 动态元件
• 元件根节点

效果种类
以下有6种渐入与渐出效果

1.v-enter

• 进入的起始状态
• 在元素前加入,插入後移除一帧

2.v-enter-active

• 整个进入过程
• 在元素前加入,动画完成後移除
• 可定义淡入过程时间、延迟、移动曲线

3.v-enter-to (v-enter移除时触发)

• 进入的结束状态
• 插入元素後,加入一帧
• 动画完成时删除

4.v-leave

• 离开的开始状态
• 触发离开立即加入,一帧後删除

5.v-leave-active

• 整个离开过程
• 触发离开时加入,完成动画後移除
• 可定义淡出过程时间、延迟、移动曲线

6.v-leave-to(v-leave移除时触发)

• 离开的结束状态
• 触发离开时,加入一帧
• 动画完成时删除

(图片来源:Vue官网)

范例
1.v-enter

2. v-enter-active



3.v-enter-to

参考资料: https://vuejs.org/v2/guide/transitions.html#Transition-Classes