vue过渡动画之——过渡类名

最新推荐文章于 2025-02-26 08:00:00 发布

原创最新推荐文章于 2025-02-26 08:00:00 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#过渡类名

vue.js 专栏收录该内容

43 篇文章

订阅专栏

博客介绍了过渡类名的使用，进入过渡开始于v-enter，过程为v-enter-active，结束于v-enter-to或.el样式；离开过渡开始于v-leave或.el样式，过程为v-leave-active，结束于v-leave-to。还指出v-enter-to和.el优先选v-enter-to，最终是.el样式，v-leave和.el优先选.el，最终消失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过渡类名的使用

<transition name="fade">
	<div class="el"></div>
</transiton>

v-enter：进入时，开始动的状态（开始变化的一个状态，当变化开始时移除）。

v-enter-active：变化的一个过程（从变化开始到变化结束）。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 变化的一个目标状态，从开始变化时生效，即v-enter移除的同时生效。到变化结束时移除，即和v-enter-active一起消失。（若没有v-enter-to样式，则默认为元素定义的样式即.el的样式）（紧接着是的元素呈现出最后的样式即——el的定义样式）

进入时的过渡为：开始于v-enter 过程为v-enter-active 结束于v-enter-to(当没有v-enter-to时为.el最终定义的样式）


v-leave: 定义离开过渡的开始状态。即转头离开时的一个状态，转头时移除。

v-leave-active：转头时立即生效，转头离开动作完成后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 离开动作的一个目标状态，转头时生效同时v-leave移除，转头离开动作完成时移除同时v-leave-active移除。

离开时的过渡：开始于v-leave(当有默认的.el样式时，优先选用.el样式)，过程为：v-leave-active 离开结束时的状态为v-leave-to

小结：v-enter-to和.el优先选用v-enter-to样式，但最终是.el样式。
v-leave和.el优先选用.el样式，但最终是消失。