关于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入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
JS实现带动画的回到顶部效果
Dec 28 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
深入理解Node内建模块和对象
Mar 12 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版(3)
2006/10/09 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php时间函数用法分析
2016/05/28 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
详解Python中的四种队列
2018/05/21 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python之列表的插入&替换修改方法
2018/06/28 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
利用python求积分的实例
2019/07/03 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript