聊一聊Vue.js过渡效果
作者:lijiao 发布时间:2024-05-13 09:07:51
通过 Vue.js 的过渡系统,你可以轻松的为 DOM 节点 * 入/移除的过程添加过渡动画效果。Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。
以 v-transition="my-transition" 这个指令为例,当带有这个指令的 DOM 节点 * 入或移除时,Vue 将会:
用 my-transition 这个 ID 去查找是否有注册过的 JavaScript 钩子对象。这个对象可以是由 Vue.transition(id, hooks) 全局注册,或是通过 transitions 选项定义在当前的组件内部。如果找到此对象,则会在过渡动画不同的阶段调用相应的钩子。
自动探测目标元素是否应用了 CSS 过渡效果或者动画效果,并在适当的时机添加/移除 CSS 类名。
如果没有提供 JavaScript 钩子函数,也没有检测到相应的 CSS 过渡/动画效果,DOM 的插入/移除会在下一帧立即执行。
所有的 Vue.js 过渡效果只有在该 DOM 操作是通过 Vue.js 触发时才会生效。触发的方式可以是通过内置指令,比如 v-if,或是通过 Vue 实例的方法,比如 vm.$appendTo()。
CSS 过渡效果
一个典型的 CSS 过渡效果定义如下:
<div v-if="show" v-transition="expand">hello</div>
你还需要定义 .expand-transition, .expand-enter 和.expand-leave 三个 CSS 类:
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
同时,你也可以提供 JavaScript 钩子:
Vue.transition('expand', {
beforeEnter: function (el) {
el.textContent = 'beforeEnter'
},
enter: function (el) {
el.textContent = 'enter'
},
afterEnter: function (el) {
el.textContent = 'afterEnter'
},
enterCancelled: function (el) {
// handle cancellation
},
`
beforeLeave: function (el) {
el.textContent = 'beforeLeave'
},
leave: function (el) {
el.textContent = 'leave'
},
afterLeave: function (el) {
el.textContent = 'afterLeave'
},
leaveCancelled: function (el) {
// handle cancellation
}
})
结果
这里使用的 CSS 类名由 v-transition 指令的值所决定。以 v-transition="fade" 为例,CSS 类 .fade-transition 将会一直存在,而 .fade-enter 和 .fade-leave 将会在合适的时机自动被添加或移除。当 v-transition 指令没有提供值的时候,所使用的 CSS 类名将会是默认的 .v-transition, .v-enter 和 .v-leave。
当 show 属性变化时,Vue 会依据其当前的值来插入/移除 <div> 元素,并在合适的时机添加/移除对应的 CSS 类,具体如下:
当 show 变为 false 时,Vue 将会:
1.调用 beforeLeave 钩子;
2.在元素上应用 CSS 类 .v-leave 来触发过渡效果;
3.调用 leave 钩子;
4.等待过渡效果执行完毕; (监听 transitionend 事件)
5.从 DOM 中移除元素并且移除 CSS 类 .v-leave。
6.调用 afterLeave 钩子。
当 show 为 true 时,Vue 将会:
1.调用 beforeEnter 钩子;
2.在元素上应用 CSS 类 .v-enter;
3.将元素插入 DOM;
4.调用 enter 钩子;
5.应用 .v-enter 类, 然后强制 CSS 布局以保证 .v-enter 生效;最后移除 .v-enter 来触发元素过渡到原本的状态。
6.等待过渡效果执行完毕;
7.调用 afterEnter 钩子。
此外,如果一个正在执行进入的过渡效果的元素在过渡还未完成之前就被移除,则 enterCancelled 钩子将会被执行。这个钩子可以用于清理工作,比如移除在 enter 时创建的计时器。对于正在离开过渡中又被重新插入的元素同理。
上述所有的钩子函数执行时,其 this 都指向相应的 Vue 实例。如果一个元素本身是一个 Vue 实例的根节点,则此实例将被应用为 this;否则 this 指向该过渡指令所属的实例。
最后,enter 与 leave 钩子函数可以接受可选的第二个参数:一个回调函数。当你的函数签名中含有第二个参数时,即表示你期望使用此回调来显式地完成整个过渡过程,而不是依赖 Vue 去自动检测 CSS 过渡的 transitionend 事件。比如:
enter: function (el) {
// 无第二个参数
// 过渡效果的结束由 CSS 过渡结束事件来决定
}
VS
enter: function (el, done) {
// 有第二个参数
// 过渡效果结束必须由手动调用 `done` 来决定
}
当多个元素同时执行过渡效果时,Vue.js 会进行批量处理以保证只触发一次强制布局。
CSS 动画
CSS 动画通过与 CSS 过渡效果一样的方式进行调用,区别就是动画中 .v-enter 类并不会在节点插入 DOM 后马上移除,而是在 animationend 事件触发时移除。
示例: (省略了兼容性前缀)
<span v-show="show" v-transition="bounce">Look at me!</span>
.bounce-enter {
animation: bounce-in .5s;
}
.bounce-leave {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
结果
纯 JavaScript 过渡效果
你也可以只使用 JavaScript 钩子,不定义任何 CSS 过渡规则。当只使用 JavaScript 钩子时,enter 和 leave 钩子必须使用 done 回调,否则它们将会被同步调用,过渡将立即结束。下面的示例中我们使用 jQuery 来注册一个自定义的 JavaScript 过渡效果:
Vue.transition('fade', {
enter: function (el, done) {
// 此时元素已 * 入 DOM
// 动画完成时调用 done 回调
$(el)
.css('opacity', 0)
.animate({ opacity: 1 }, 1000, done)
},
enterCancelled: function (el) {
$(el).stop()
},
leave: function (el, done) {
// 与 enter 钩子同理
$(el).animate({ opacity: 0 }, 1000, done)
},
leaveCancelled: function (el) {
$(el).stop()
}
})
定义此过渡之后,你就可以通过给 v-transition 指定对应的 ID 来调用它:
<p v-transition="fade"></p>
如果一个只使用 JavaScript 过渡效果的元素恰巧也受到其它 CSS 过渡/动画规则的影响,这可能会对 Vue 的 CSS 过渡检测机制产生干扰。碰到这样的状况时,你可以通过给你的钩子对象添加 css: false 来禁止 CSS 检测。
渐进过渡效果
当同时使用 v-transition 和 v-repeat 时,我们可以为列表元素添加渐进的过渡效果,你只需要为你的过渡元素加上 stagger, enter-stagger 或者 leave-stagger 特性(以毫秒为单位):
<div v-repeat="list" v-transition stagger="100"></div>
或者你也可以提供 stagger, enterStagger 或 eaveStagger 钩子来进行更细粒度的控制:
Vue.transition('stagger', {
stagger: function (index) {
// 为每个过渡元素增加 50ms 的延迟,
// 但是最大延迟为 300ms
return Math.min(300, index * 50)
}
})
示例:


猜你喜欢
- python中eval和int的区别是什么?下面给大家介绍一下:1.eval()函数eval(<字符串>)能够以Python表达
- 本文介绍了写给新手同学的vuex快速上手指北小结,分享给大家,具体如下引入//store.jsimport Vue from 'vu
- 初学Python,写了一小段程序,在pycharm中debug一直报错,在网上搜了很久,尝试多种方法后还是没有用。尝试了很久之后,发现这个问
- 看代码吧~import numpy as npa = np.array([[2, 4, 6, 1], [1, 5, 2, 9]])print
- go-micro是golang的一个微服务框架。这篇文章将介绍使用go-micro最新版本v4开发gRPC服务的方式。1、安装protoc这
- 项目演示:一、输入金额二、跳转到支付宝付款三、支付成功四、跳转回自己网站在使用支付宝接口的前期准备:1、支付宝公钥2、应用公钥3、应用私钥4
- 开启mysql的远程访问权限默认mysql的用户是没有远程访问的权限的,因此当程序跟数据库不在同一台服务器上时,我们需要开启mysql的远程
- 一、利用ASP和ADO实现数据库操作的工作流程ASP内嵌了五个对象Resquest、Response、Server、Seesion、Appl
- 最近在研究网页的切片算法,很可能很多人不知道什么是切片算法,其实这是一种面向搜索引擎的网页分块、切片的原理,目前随着工作的深入,逐渐碰到了各
- TensorFlow 2.0测试版在今年春季发布,新版本比1.x版本在易用性上有了很大的提升。但是由于2.0发布还没有多久,现在大部分论文的
- 本文提供许多的滤波方法,这些方法放在filters.rank子模块内。这些方法需要用户自己设定滤波器的形状和大小,因此需要导入morphol
- 实现对下一个单词的预测RNN 原理自己找,这里只给出简单例子的实现代码import tensorflow as tfimport numpy
- 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定。6.1 基本用法表单控件在实际业务较为
- 初学python和numpy,对在学习多维切片的过程中遇到的问题做个总结。一维切片就不说了,比较简单,先说下二维的,二维的理解了多维的就简单
- 继续我们的 Javascript 优化计划,上期已经做到怎么尽可能的缩小 Javascript 脚本的文件体积便于传输。不过这样做仅仅是不够
- 本文实例讲述了ThinkPHP中自定义错误页面和提示页面的方法。分享给大家供大家参考。具体实现方法如下:在ThinkPHP中有两个方法时提示
- 1、背景介绍在采用通常的socket抓包方式下,操作系统会自动将收到包的VLAN信息剥离,导致上层应用收到的包不会含有VLAN标签信息。而l
- 树,因其清晰明了的展现形式而被广泛的使用日常的开发过程中我们需要经常与“树”打交道,例如公司的组织架构树、服务器的项目归属树,管理后台侧边树
- 1、主题毫无疑问Pycharm是一个具有强大快捷键系统的IDE,这就意味着你在Pycharm中的任何操作,例如打开一个文件、切换编辑区域等,
- 本文实例讲述了python避免死锁方法。分享给大家供大家参考。具体分析如下:当两个或者更多的线程在等待资源的时候就会产生死锁,两个线程相互等