聊一聊Vue.js过渡效果


Posted in Javascript onSeptember 07, 2016

通过 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
 }
})

结果

聊一聊Vue.js过渡效果

这里使用的 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);
 }
}

结果

聊一聊Vue.js过渡效果

纯 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)
 }
})

示例:

聊一聊Vue.js过渡效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
canvas的神奇用法
Feb 03 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
create-react-app开发常用配置教程
Jun 25 Javascript
BootStrap中的表单大全
Sep 07 #Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 #Javascript
JavaScript 函数模式详解及示例
Sep 07 #Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 #Javascript
jquery validate表单验证插件
Sep 06 #Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 #Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 #Javascript
You might like
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
带你快速理解javascript中的事件模型
2017/08/14 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
Python计算程序运行时间的方法
2014/12/13 Python
python类装饰器用法实例
2015/06/04 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
用python实现一个简单的验证码
2020/12/09 Python
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
建筑工程毕业生自我鉴定
2014/01/14 职场文书
开业庆典答谢词
2014/01/18 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
三好学生个人总结
2015/02/15 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python