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 相关文章推荐
文字幻灯片
Jun 26 Javascript
javascript 清除输入框中的数据
Apr 13 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
php 远程图片保存到本地的函数类
2008/12/08 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
xml和web特殊字符
2009/04/28 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
Node.js的特点详解
2017/02/03 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
详解vuex的简单使用
2018/03/12 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
python模块之time模块(实例讲解)
2017/09/13 Python
Python3爬虫学习入门教程
2018/12/11 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
python SOCKET编程基础入门
2021/02/27 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
库房管理员岗位职责
2015/02/12 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书