vue 动画

Posted 2021-11-10 tong-yao

1、如果需要让一个元素进行动画展示的时候，那么当前元素/组件必须是通过 v-if v-show 动态组件 来显示隐藏

 

2、需要添加动态的元素外层必须包裹一个内置组件 <transition>

 

3、transition 会有一个name属性 当前name属性的值为 动画的类名

 

 

动态类名的划分

<name>-enter

<name>-enter-active 过度 动画的类型 时间 延迟

<name>-enter-to

 

<name>-leave

<name>-leave-active 过度 动画的类型 时间 延迟

<name>-leave-to

 

 

4、如果需要多个元素一起加动画的时候需要将transition组件换成 transition-group

除此之外每个元素身上必须有一个唯一的标识 key

 

 

5、transition当前内置组件可以给动画提前定义类名

 

 

<transition

enter-class=""

enter-active-class = ""

enter-to-class=""

></transition>