(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过渡动画类得解释
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 1. Vue.js里面的动画 一个小小的动画可以很大程度上提高用户的体验 vue中将一个动画分成了进入和退出两个阶...
- 现在app页面需要每次切换页面的时候做淡入淡出效果,正好尝试一下vue自带的transition过渡动画组件,下面...