Vuejs第七篇之Vuejs过渡动画案例全面解析


Posted in Javascript onSeptember 05, 2016

本篇资料是小编结合官方文档整理的一套更全面细致的说明,代码更多更全。

本篇资料来于官方文档:

http://cn.vuejs.org/guide/transitions.html

下面看下过渡动画相关知识:

①过渡动画的定义;

简单来说,就是当模块消失、出现时,会以什么样的形式消失和出现;

如果要使用过渡动画,则在标签里加入属性:

transition=”过渡动画名”

例如:

<div class="box" v-if="box_1" transition="mytran">1</div>

这里是mytran就是过渡动画名,他是一个类名,动画将基于这个名字而添加多个不同的扩展名(具体请参看下面)

②过渡动画绑定的事件:

【1】v-if

【2】v-show

【3】v-for(只在插入和删除时触发,可以自己写,或者使用vue-animated-list插件);

自己写例如:

<div v-for="i in items" class="box" transition="mytran">{{i}}</div>

动画写法略(参照下面)

【4】动态组件;

【5】在组件的根节点上,并且被Vue实例DOM方法触发(例如:vm.$appendTo(el))。大概就是说,把组件添加到某个根节点上去。

③CSS动画:

【1】首先,需要有transition属性,然后取得其值;

【2】其次,CSS里需要有以值为名的三个类名,分别是:

Vuejs第七篇之Vuejs过渡动画案例全面解析

假设transition的值为mytran,则类名为

说明

.mytran-transition

动画状态,css的transition属性放在这里,他表示的类会始终存在于DOM之上;

另外这里的样式会覆盖标签的默认class提供的样式

.mytran-enter

进入时,组件从这个css状态扩展为当前css状态,这个类只存在最开始的一帧

.mytran-leave

退出时,组件从原来的css状态恢复为这个状态,这个类从退出开始时生效,在退出结束时删除。

如代码:

<style> 
.box { 
width: 100px; 
height: 100px; 
border: 1px solid red; 
display: inline-block; 
} 

/*这个定义动画情况,以及存在时的样式,这个样式会覆盖class里的样式*/ 
.mytran-transition { 
transition: all 0.3s ease; 
background-color: greenyellow; 
} 

/* .mytran-enter 定义进入的开始状态 */ 
/* .mytran-leave 定义离开的结束状态 */ 
.mytran-enter, .mytran-leave { 
height: 0; 
width: 0; 
} 
</style> 
<div id="app"> 
<button @click="change">点击随机隐藏和显示</button> 
<br/> 
<div class="box" v-if="box_1" transition="mytran">1</div> 
<div class="box" v-if="box_2" transition="mytran">2</div> 
<div class="box" v-if="box_3" transition="mytran">3</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
box_1: true, 
box_2: true, 
box_3: true 
}, 
methods: { 
change: function () { 
for (var i = 1; i < 4; i++) { 
this['box_' + i] = Math.random() > 0.5 ? true : false; 
} 
} 
} 
}) 
setInterval(vm.change, 300); 
</script>

点击会随机让3个方块隐藏或者显示;

④JavaScript钩子:

【1】简单来说,这个不影响CSS动画(依然是那三个类的变化);

【2】这个主要用于抓取进入和离开各四个时刻,用于做某些事情;

【3】这八个时刻分别为:

进入:beforeEnter(进入之前),enter(进入动画刚开始),afterEnter(进入动画结束),enterCancelled(进入被中断);

退出:beforeLeave(退出之前),leave(退出动画刚开始),afterLeave(退出动画结束),leaveCancelled(退出被中断);

【4】对DOM的修改,部分情况下会恢复,例如在leave这一步修改dom的textContent属性,将在dom重新进入时恢复原状;但若在enter这一步修改,则不会恢复。

如代码:

Vue.transition('mytran', { 
beforeEnter: function (el) { //进入之前 
console.log("进入动画开始时间:" + new Date().getTime()); 
}, 
enter: function (el) { 
el.textContent = new Date(); 
}, 
afterEnter: function (el) { 
console.log("进入结束时间:" + new Date().getTime()); 
}, 
beforeLeave: function (el) { 
console.log("离开动画开始时间:" + new Date().getTime()); 
}, 
leave: function (el) { 
$(el).text("离开中..." + new Date()); 
}, 
afterLeave: function (el) { 
console.log("离开结束时间:" + new Date().getTime()); 
} 
})

⑤自定义过渡类名:

之所以要自定义过渡类名,是因为我们不可能要求每个css动画的样式,都是按照Vuejs标准的写法来写的(比如我们下载别人写的代码);

注:需要在声明相关的Vue实例之前进行定义。

首先,推荐一个Vuejs官方教程推荐的动画集合:(这个不是下载链接,需要打开它去找到下载链接才能下载)

https://daneden.github.io/animate.css/

下载后,导入这个css文件,然后开始自定义动画;

<div id="app"> 
<button @click="change">点击随机隐藏和显示</button> 
<br/> 
<div class="box animated" v-if="box" transition="bounce">1</div> 
</div> 
<script> 
Vue.transition("bounce", { 
enterClass: 'bounceInLeft', 
leaveClass: 'bounceOutRight' 
}) 
var vm = new Vue({ 
el: '#app', 
data: { 
box: true 
}, 
methods: { 
change: function () { 
this.box = !this.box; 
} 
} 
}); 
</script>

解释:

【1】进行动画的标签,需要有animated这个class;

【2】enterClass和leaveClass相当于之前的xxx-enter和xxx-leave;

【3】效果是从左边闪进来,从右边闪出去。

【4】需要在声明Vue实例前设置动画,否则会无效;

⑥使用animation动画

在Vuejs中,animation动画和transition动画是不同的。

简单来说,transition动画分为三步:常驻类,进入时触发的类,退出时触发的类;只有常驻类有transition动画属性,其他两步只有css状态;

而animation动画分为两步:进入时触发的类,退出时触发的类。当然,还有xxx-transition这个类存在于dom之中(这个类可以用于设置动画原点,或者干脆不设置这个类);

在animation动画中,进入和退出时的class类,都应该有动画效果,例如:

@keyframes fat { 
0% { 
width: 100px 
} 
50% { 
width: 200px 
} 
100% { 
width: 100px 
} 
} 
.fat-leave, .fat-enter { 
animation: fat 1s both; 
}

进入和退出时,执行的类名和transition一样,都是xxx-leave和xxx-enter这样格式的;

当然,也可以自定义类名。

示例代码:

<style> 
.box { 
width: 100px; 
height: 100px; 
border: 1px solid red; 
display: inline-block; 
} 
@keyframes fat { 
0% { 
width: 100px 
} 
50% { 
width: 200px 
} 
100% { 
width: 100px 
} 
} 
.fat-leave, .fat-enter { 
animation: fat 1s both; 
} 
</style> 
<div id="app"> 
<button @click="change">点击随机隐藏和显示</button> 
<br/> 
<div class="box animated" v-if="box" transition="fat">1</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
box: true 
}, 
methods: { 
change: function () { 
this.box = !this.box; 
} 
} 
}); 
</script>

效果:

消失:先变宽,再恢复,然后消失;

进入:出现,变宽,再恢复,停留;

这里偷懒共用了同一个动画效果。

⑦除此之外,还有

【1】显式声明动画类型(假如动画同时存在transition和animation,且分情况执行其中一种);

【2】过渡流程详解(触发动画时,js钩子执行与css执行的顺序);

【3】CSS动画(就是animation,像上面那样已经写过了,具体略);

【4】JavaScript过渡(不是js钩子,钩子是指在某个阶段会调用某个函数,但这个钩子跟动画无关),用JavaScript来控制动画,比如jquery的animate方法;

【5】v-for使用的渐进过渡;

由于暂时用不上,所以略掉,需要查看的请打开连接:

http://cn.vuejs.org/guide/transitions.html

以上所述是小编给大家介绍的Vuejs第七篇之Vuejs过渡动画案例全面解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 #Javascript
JS简单随机数生成方法
Sep 05 #Javascript
使用React实现轮播效果组件示例代码
Sep 05 #Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 #Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 #Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 #Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 #Javascript
You might like
php防攻击代码升级版
2010/12/29 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python获取某一天是星期几的方法示例
2017/01/17 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
基于python实现删除指定文件类型
2020/07/21 Python
浅析python函数式编程
2020/09/26 Python
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
公积金单位接收函
2014/01/11 职场文书
公益活动邀请函
2014/02/05 职场文书
文秘大学生求职信
2014/02/25 职场文书
党员教师一句话承诺
2014/05/30 职场文书
学前班语言教学计划
2015/01/20 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书