vue过渡动画类得解释

(1)v-enter:点击按钮,元素刚刚出现的时候你看到的样式就是v-enter中定义的样式,然后开始过渡,变成v-enter-to中定义的样式
(2)v-enter-active:这个样式定义了出现动画中从v-enter到v-enter-to样式过渡变化所需要的时间,以及定义哪些样式是要要过渡的,以及过渡的方式,比如均匀变化,先快后慢变化等等。
(3)v-enter-to:v-enter经过变化后变成的样式,注意出场动画到这里变为了v-enter-to的样式就结束了,然后就会突然变为元素本来的样式,这样看来变化会有点突兀,所以一般不会去定义这个样式,这样就会动画自动就会从v-enter样式过渡到元素本来的样式,这样看起来比较自然一些。
(4)v-leave:类比以上就很相似了,点击按钮,离开动画最先开始就是这个类里面的样式,一般很难看到
(5)v-leave-active:定义从v-leave到v-leave-to样式变化所需时间等
(6)v-leave-to:离开动画经过过渡后变成的样式,注意,变成这个样式之后,元素会直接突然消失。
总结:
1.v-enter-to,v-leave一般不写,不写的原因是:按照一般的过渡效果(动画),进入的最后状态就是元素本身的样式,离开的最初状态也是元素本身的样式,所以是没有必要写的。
2.v-enter, v-leave-to中的css一般相同,一个是进入时过渡(动画)的初始样式,一个是离开过渡(动画)结束时的样式。
3.v-enter-active ,v-leave-active 中的css一般相同,一般都是用于定义过渡(动画)的过程时间,延迟和曲线函数。当然离开的过渡(动画)的过程时间,延迟和曲线函数和进入的可以是不同的。
————————————————
版权声明:本文为CSDN博主「Je pense a toii」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_40891322/article/details/109738212

你可能感兴趣的:(vue过渡动画类得解释)