简单谈谈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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
javascript中this的四种用法
May 11 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 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接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
js查错流程归纳
2012/05/04 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
跟老齐学Python之dict()的操作方法
2014/09/24 Python
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python中six模块基础用法
2019/12/08 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
函授自我鉴定
2013/11/06 职场文书
打架检讨书300字
2014/02/02 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
常务副总经理任命书
2014/06/05 职场文书
公司人事管理制度
2015/08/05 职场文书
公司周年庆寄语
2019/06/21 职场文书