简单谈谈vue的过渡动画(推荐)


Posted in Javascript onOctober 11, 2017

在vue中,实现过渡动画一般是下面这样:

<transition name="fade">
 <div></div>
</transition>

用一个transition对元素或者组件进行封装.

在过渡的时候,会有 4 个(CSS)类名在 enter/leave 的过渡中切换。

1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

2.v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。

3.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

4.v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。

上面是官方文档的原话,但是这4个类名如何运用呢?下面看个例子

<transition name="fold">
 <div v-show="show" class="example"></div>
</transition>

css:
.example {
 width: 100px;
 height: 100px;
 transform: translate3d(0, -100px, 0);
}
.fold-enter-active, .fold-leave-active {
 transition: all .5s;
}
.fold-enter, .fold-leave-active {
 transform: translate3d(0, 0, 0);
}

当show = true时:

这里的fold-enter,是在元素显示的一瞬间被加入,然后瞬间被移除,在上面的例子中,example这个块状元素本来因为有了transform: translate3d(0, -100px, 0)这个样式,所以被上移了100px,但是因为fold-enter,所以将example这个块状元素移到了原位,但是fold-enter因为瞬间就被移除掉了,所以这时候的元素的样式又变成了transform: translate3d(0, -100px, 0),但是这时候fold-enter-active这个样式就生效了,因为设置了transition: all .5s,所以元素会在0.5s的时间内上移100px,在过渡动画结束之后,fold-enter-active这个类马上被移除.

当show = false时:

example不会马上消失,这个时候fold-leave-active这个类就起作用了,example这时的位置是在-100px,fold-leave-active定义的是过渡的结束状态:transform: translate3d(0, 0, 0);,但是同时又设置了transition: all .5s,所以这时元素会在0.5s的时间内下移100px.之后fold-leave-active被移除.

官网的一张图

简单谈谈vue的过渡动画(推荐)

另外,还可以在动画中调用js钩子函数:

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>
</transition>

不过用的不多,可以在methods中定义这些方法.

以上这篇简单谈谈vue的过渡动画(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 #Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 #jQuery
AngularJS中下拉框的高级用法示例
Oct 11 #Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 #Javascript
AngularJS中下拉框的基本用法示例
Oct 11 #Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 #Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 #Javascript
You might like
php调用mysql数据 dbclass类
2011/05/07 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
js href的用法
2010/05/13 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
python自带的http模块详解
2016/11/06 Python
django的登录注册系统的示例代码
2018/05/14 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
如何教少儿学习Python编程
2020/07/10 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
电大毕业生自我鉴定
2013/11/10 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
培训讲师邀请函
2014/01/10 职场文书
银行工作检查书范文
2014/01/31 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
实习介绍信模板
2015/01/30 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python