简单谈谈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 相关文章推荐
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
js实现动态显示时间效果
Mar 06 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
vue组件生命周期详解
Nov 07 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
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
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
PHP通用检测函数集合
2011/02/08 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
什么是JavaScript
2009/08/13 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
详解Node全局变量global模块
2017/09/28 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
在Python中使用成员运算符的示例
2015/05/13 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
python 操作hive pyhs2方式
2019/12/21 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
灰雀教学反思
2014/04/28 职场文书
升职演讲稿范文
2014/05/23 职场文书
物业保安岗位职责
2014/07/02 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL