关于vue.js过渡css类名的理解(推荐)


Posted in Javascript onApril 10, 2017

首先附上官方文档图。

关于vue.js过渡css类名的理解(推荐)

总体就是在解释v-enter,v-enter-active,v-leave,v-leave-active的意思,但是我看了半天,就是看不懂,老是和鼠标的mouseover和mouseout事件联想在一起,在经过多方的查找,总算是理解了,以下就是我所理解的意思,希望对路过的有所帮助,更希望路过的能帮我检查检查。

start:

首先,通过一个例子来说明,实践是检验真理的唯一标准。

关于vue.js过渡css类名的理解(推荐)

结果:点击按钮,show=false时,div消失;再次点击,show=true,div用蓝色逐渐变成橙色,过渡时间为3s。

将样式更改为:

关于vue.js过渡css类名的理解(推荐)

结果:点击按钮,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类名的理解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
vue.js单页面应用实例的简单实现
Apr 10 #Javascript
javascript内存分配原理实例分析
Apr 10 #Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 #Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 #Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 #Javascript
Vue2递归组件实现树形菜单
Apr 10 #Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 #Javascript
You might like
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
php use和include区别总结
2019/10/13 PHP
JavaScript 指导方针
2007/04/05 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
教师校本培训方案
2014/02/26 职场文书
初三学生个人自我评定
2014/04/06 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
新文化运动的口号
2014/06/21 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
python中的装饰器该如何使用
2021/06/18 Python
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL