关于vue.js过渡css类名的理解(推荐)
首先附上官方文档图。
总体就是在解释v-enter,v-enter-active,v-leave,v-leave-active的意思，但是我看了半天，就是看不懂，老是和鼠标的mouseover和mouseout事件联想在一起，在经过多方的查找，总算是理解了，以下就是我所理解的意思，希望对路过的有所帮助，更希望路过的能帮我检查检查。
start:
首先，通过一个例子来说明，实践是检验真理的唯一标准。
结果：点击按钮，show=false时，div消失；再次点击，show=true，div用蓝色逐渐变成橙色，过渡时间为3s。
将样式更改为：
结果：点击按钮，show=false时，div逐步从橙色变成蓝色，过渡时间为3s。
通过以上两个例子，v-enter和v-leave的区别已经显而易见了。
v-enter:定义目标元素在消失后，又开始出现时的状态；
v-leave:定义目标元素正准备消失时的状态；
但是以上两个都是一瞬间的事情，就好比flash动画的一帧内容，至于第二帧至结尾的内容就交给v-enter-ative和v-leave-active了。
v-enter-active：定义目标元素出现在文档中的最终状态（最后一帧）；
v-leave-active：定义目标元素离开文档时的最终状态（最后一帧），展现完这一状态后就消失了。
另外，过渡的效果transition都定义在上面的两个样式中，也难怪官方文档中v-enter-active和v-leave-active表示的是一段距离。
注意：这两个样式一定要定义在对应的v-enter或者v-leave之前，否则显示是无效的。
以上所述是小编给大家介绍的关于vue.js过渡css类名的理解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了vue开发之不同浏览器的类型判断方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
对应前端小白来说,一看到:deep()这些模式的用法就不理解是啥意思,下面简单介绍一下:deep()是什么以及如何使用,感兴趣的朋友跟随小编一起看看吧2023-10-10
在vue2项目中，组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下（后台获取数据存入vuex，组件之间共享数据），那么就需要用vuex来管理这些。2017-05-05
这篇文章主要介绍了使用vue-upload上传图片的详细使用说明，文中有相关的代码示例供大家参考，感兴趣的小伙伴一起跟着小编来学习吧2023-05-05
这篇文章主要介绍了vue3引入uview-plus3.0移动组件库的流程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue中的echarts图表如何实现loading效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题
setinterval()是定时调用的函数,可按照指定的周期（以毫秒计）来调用函数或计算表达式,这篇文章主要给大家介绍了关于vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了使用vue的transition完成滑动过渡的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue webpack多页面构建的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue如何截取字符串，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论