Vue.js每天必学之过渡与动画


Posted in Javascript onSeptember 06, 2016

通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。

为了应用过渡效果,需要在目标元素上使用 transition 特性:

<div v-if="show" transition="my-transition"></div>

transition 特性可以与下面资源一起用:
 •v-if
 •v-show
 •v-for (只在插入和删除时触发,使用 vue-animated-list 插件)
 •动态组件 (介绍见组件)
 •在组件的根节点上,并且被 Vue 实例 DOM 方法(如 vm.$appendTo(el))触发。 

当插入或删除带有过渡的元素时,Vue 将:
 1.尝试以 ID "my-transition" 查找 JavaScript 过渡钩子对象——通过 Vue.transition(id, hooks) 或 transitions 选项注册。如果找到了,将在过渡的不同阶段调用相应的钩子。

 2.自动嗅探目标元素是否有 CSS 过渡或动画,并在合适时添加/删除 CSS 类名。

 3.如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除)在下一帧中立即执行。

CSS 过渡

示例

典型的 CSS 过渡像这样:

<div v-if="show" 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 定义离开的结束状态 */
.expand-enter, .expand-leave {
 height: 0;
 padding: 0 10px;
 opacity: 0;
}

你可以在同一元素上通过动态绑定实现不同的过渡:
<div v-if="show" :transition="transitionName">hello</div>

new Vue({
 el: '...',
 data: {
 show: false,
 transitionName: 'fade'
 }
})

另外,可以提供 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 类名

类名的添加和切换取决于 transition 特性的值。比如 transition="fade",会有三个 CSS 类名:
 1..fade-transition 始终保留在元素上。

 2..fade-enter 定义进入过渡的开始状态。只应用一帧然后立即删除。

 3..fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效,在它结束后删除。

如果 transition 特性没有值,类名默认是 .v-transition, .v-enter 和 .v-leave。

自定义过渡类名

1.0.14 新增 
我们可以在过渡的 JavaScript 定义中声明自定义的 CSS 过渡类名。这些自定义类名会覆盖默认的类名。当需要和第三方的 CSS 动画库,比如 Animate.css 配合时会非常有用:

<div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>

Vue.transition('bounce', {
 enterClass: 'bounceInLeft',
 leaveClass: 'bounceOutRight'
})

显式声明 CSS 过渡类型

1.0.14 新增

Vue.js 需要给过渡元素添加事件侦听器来侦听过渡何时结束。基于所使用的 CSS,该事件要么是 transitionend,要么是 animationend。如果你只使用了两者中的一种,那么 Vue.js 将能够根据生效的 CSS 规则自动推测出对应的事件类型。但是,有些情况下一个元素可能需要同时带有两种类型的动画。比如你可能希望让 Vue 来触发一个 CSS animation,同时该元素在鼠标悬浮时又有 CSS transition 效果。这样的情况下,你需要显式地声明你希望 Vue 处理的动画类型 (animation 或是 transition):

Vue.transition('bounce', {
 // 该过渡效果将只侦听 `animationend` 事件
 type: 'animation'
})

过渡流程详解

当 show 属性改变时,Vue.js 将相应地插入或删除 <div> 元素,按照如下规则改变过渡的 CSS 类名:
 •如果 show 变为 false,Vue.js 将:
1.调用 beforeLeave 钩子;
 2.添加 v-leave 类名到元素上以触发过渡;
 3.调用 leave 钩子;
 4.等待过渡结束(监听 transitionend 事件);
 5.从 DOM 中删除元素并删除 v-leave 类名;
 6.调用 afterLeave 钩子。

 •如果 show 变为 true,Vue.js 将:
1.调用 beforeEnter 钩子;
 2.添加 v-enter 类名到元素上;
 3.把它插入 DOM;
 4.调用 enter 钩子;
 5.强制一次 CSS 布局,让 v-enter 确实生效。然后删除 v-enter 类名,以触发过渡,回到元素的原始状态;
 6.等待过渡结束;
 7.调用 afterEnter 钩子。

 另外,如果在它的进入过渡还在进行中时删除元素,将调用 enterCancelled 钩子,以清理变动或 enter 创建的计时器。反过来对于离开过渡亦如是。

上面所有的钩子函数在调用时,它们的 this 均指向其所属的 Vue 实例。编译规则:过渡在哪个上下文中编译,它的 this 就指向哪个上下文。

最后,enter 和 leave 可以有第二个可选的回调参数,用于显式控制过渡如何结束。因此不必等待 CSS transitionend 事件, Vue.js 将等待你手工调用这个回调,以结束过渡。例如:

enter: function (el) {
 // 没有第二个参数
 // 由 CSS transitionend 事件决定过渡何时结束
}

vs.

enter: function (el, done) {
 // 有第二个参数
 // 过渡只有在调用 `done` 时结束
}

<p class="tip">当多个元素一起过渡时,Vue.js 会批量处理,只强制一次布局。

CSS 动画

CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。

示例: (省略了兼容性前缀)

<span v-show="show" transition="bounce">Look at me!</span>

.bounce-transition {
 display: inline-block; /* 否则 scale 动画不起作用 */
}
.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 回调,否则它们将被同步调用,过渡将立即结束。

为 JavaScript 过渡显式声明 css: false 是个好主意,Vue.js 将跳过 CSS 检测。这样也会阻止无意间让 CSS 规则干扰过渡。

在下例中我们使用 jQuery 注册一个自定义的 JavaScript 过渡:

Vue.transition('fade', {
 css: false,
 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()
 }
})

然后用 transition 特性中:

<p transition="fade"></p>

渐近过渡

transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger, enter-stagger 或 leave-stagger:

<div v-for="item in list" transition="stagger" stagger="100"></div>

或者,提供一个钩子 stagger, enter-stagger 或 leave-stagger,以更好的控制:

Vue.transition('stagger', {
 stagger: function (index) {
 // 每个过渡项目增加 50ms 延时
 // 但是最大延时限制为 300ms
 return Math.min(300, index * 50)
 }
})

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
Vue自定义指令详解
Jul 28 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 #Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 #Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 #Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 #Javascript
AngularGauge 属性解析详解
Sep 06 #Javascript
AngularJS 面试题集锦
Sep 06 #Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 #Javascript
You might like
ip签名探针
2006/10/09 PHP
PHP Socket 编程
2010/04/09 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Python深入学习之对象的属性
2014/08/31 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
大学生毕业自我评价范文分享
2013/11/11 职场文书
无工作经验者个人求职信范文
2013/12/22 职场文书
请假条标准格式规范
2014/04/10 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
创建青年文明号材料
2014/05/09 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
六年级情感作文之500字
2019/10/23 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS