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 相关文章推荐
splice slice区别
Oct 09 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
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中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
React简单介绍
2017/05/24 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
python实现单向链表详解
2018/02/08 Python
python一键去抖音视频水印工具
2018/09/14 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
浅谈Python 递归算法指归
2019/08/22 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
小学家长会邀请函
2014/01/23 职场文书
幼儿教师考核制度
2014/01/25 职场文书
售房委托书
2014/08/30 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
滴水洞导游词
2015/02/10 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android