100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue过渡动画之——过渡类名

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

时间:2024-01-17 12:11:10

相关推荐

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

过渡类名的使用

<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样式,但最终是消失。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。