52Vue封装的过渡与动画

Vue封装的过渡与动画

1.作用: 在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

2.图示:

3.写法:

• 准备好样式
  • 元素进入的样式
    • v-enter: 进入的起点
    • v-enter-active: 进入过程中
    • v-enter-to: 进入的终点
  • 元素离开的样式:
    • v-leave: 离开的起点
    • v-leave-active: 离开过程中
    • v-leave-to: 离开的终点

2.使用<transition>包裹要过度的元素，并配置name属性:

<transition name='swang'>element</transition>

3.备注: 若有多个元素需要过度，则需要使用: <transition-group>，且每个元素都要指定key值。

<transition-group name='swang'>
	<element key="1">A</element>
    <element key="2">B</element>
</transition-group>