关于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-cli3.0 特性解读,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
常见的文件上传方式可能就是new一个FormData，把文件append进去以后post给后端就可以了。但如果采用这种方式来上传大文件就很容易产生上传超时的问题。所以本文将利用Vue+NodeJS实现大文件上传，需要的可以参考一下2022-05-05
getters用于获取state里的数据,它类似于计算属性,如果要获取的数据并没有发生变化的话,就会返回缓存的数据,下面这篇文章主要给大家介绍了关于vuex学习进阶篇之getters的使用教程,需要的朋友可以参考下2022-10-10
在平时开发的时候很多情况都会使用到表格和分页功能,下面这篇文章主要给大家介绍了关于如何基于Element-Ui封装公共表格组件的详细图文步骤,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了React和Vue中监听变量变化的方法,本文通过一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state，具体内容详情大家跟随小编一起通过本文学习吧2018-11-11
这篇文章主要介绍了vue-cli设置css不生效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
浅谈angular4.0中路由传递参数、获取参数最nice的写法
下面小编就为大家分享一篇浅谈angular4.0中路由传递参数、获取参数最nice的写法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vue实现购物车的小练习，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
在本文里我们给大家整理了关于vue2.0中set添加属性后视图不能更新的解决办法以及相关知识点，需要的朋友们学习下。2019-02-02
这篇文章主要给大家介绍了关于Vue CLI3基础学习之pages构建多页应用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue CLI3具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
最新评论