transition

最新推荐文章于 2021-04-30 14:25:37 发布

原创最新推荐文章于 2021-04-30 14:25:37 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3

本文深入解析Vue.js中过渡类的使用，包括v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active和v-leave-to，阐述了它们在元素过渡过程中的角色与功能，以及如何自定义过渡效果。

在这里插入图片描述
【v-enter】

定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除

【v-enter-active】

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

【v-enter-to】

定义进入过渡的结束状态。在元素被插入一帧后生效(与此同时 v-enter 被删除)，在 transition 或 animation 完成之后移除

【v-leave】

定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除

【v-leave-active】

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

【v-leave-to】

定义离开过渡的结束状态。在离开过渡被触发一帧后生效(与此同时 v-leave 被删除)，在 transition 或 animation 完成之后移除

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀，表示过渡组件的名称。比如，如果使用，则 v-enter替换为 my-transition-enter
如下：

.my-transition-enter-active,.my-transition-leave-active{transiton:all .3}
.my-transition-enter,.my-transition-leave-to{opacity:0,transform:translateX(15px)}