vue transition 标签

• vue提供了一个过渡动画的标签 transition
• 替代css中再用transition的属性

注意事项⚠️

1. transition 标签只能包含 1 个元素；如果里面写了多个元素，则只生效第一个
2. transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示

动画类

• 进入：.v-enter 始状态、.v-enter-to 末状态、.v-enter-active 进入动画
• 离开：.v-leave 始状态、.v-leave-to 末状态、.v-leave-active 离开动画

name属性 xxx

• 进入：.xxx-enter 始状态、.xxx-enter-to 末状态、.xxx-enter-active 进入动画
• 离开：.xxx-leave 始状态、.xxx-leave-to 末状态、.xxx-leave-active 离开动画

appear 属性：一开始就生效显示动画

transition-group 标签

• transition 标签只能包含 1 个元素、 transition-group 标签可以包含多个元素
• transition-group 标签里面的元素需要设置 key 属性，作为当前元素的唯一标识

参考链接
https://wenku.baidu.com/view/912b1d00cfbff121dd36a32d7375a417866fc1e3.html
https://blog.csdn.net/Superman_H/article/details/122851610