关于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得到网页中所有的div的id
Oct 19 Javascript
javascript调试说明
Jun 07 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
Js切换功能的简单方法
Nov 23 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
JavaScript引用类型Date常见用法实例分析
Aug 08 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接收shell返回的结果中文乱码问题
2014/01/23 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
javascript中的面向对象
2017/03/30 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
公司接待方案
2014/03/08 职场文书
仓库管理计划书
2014/05/04 职场文书
高一英语教学反思
2016/03/03 职场文书
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android