关于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 相关文章推荐
详谈jQuery中的this和$(this)
Nov 13 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
vuex实现购物车功能
Jun 28 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
详解vue组件之间的通信
Aug 30 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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常用的文件操作函数经典收藏
2013/04/02 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python修改txt文件中的某一项方法
2018/12/29 Python
python读写csv文件实例代码
2019/07/05 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
详解python tcp编程
2020/08/24 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
优秀大专毕业生求职信
2014/08/04 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS