32_动画(transition)_过渡的类名

在进入/离开的过渡中,会有 6 个 class 切换。

1)v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

2)v-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

3)v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除),在 transition/animation 完成之后移除。

4)v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

5)v-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

6)v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除),在 transition/animation 完成之后移除。

过渡的类名

对于这些在 enter/leave 过渡中切换的类名,v- 是这些类名的前缀。使用 可以重置前缀,比如 v-enter 替换为 my-transition-enter。

v-enter-active 和 v-leave-active 可以控制 进入/离开 过渡的不同阶段,在下面章节会有个示例说明。

你可能感兴趣的:(32_动画(transition)_过渡的类名)