Vue2.0 Transition常见用法全解惑
Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑。这里只涉及单元素/组件的过渡实现,vue2.0的文档中还讲到了初始渲染的过渡、多个元素的过渡、多个组件的过渡和列表过渡,他们的过渡效果实现方式和单元素/组件的类似,我感觉实际项目中用的不太多吧,有兴趣的同学可以去了解一下,文档这里说的多个元素和多个组件和我们的理解可能不太一样,一定要仔细阅读文档,搞清楚到底说的是什么样的情况。
什么是过渡
Vue只有在插入,更新或者移除DOM元素时才会应用过渡效果,过渡效果的应用可以通过不同方式实现,官方文档中提到了如下几种:
在CSS过渡和动画中自动应用class;
配合使用第三方的CSS动画库,如Animate.css;
在过渡钩子函数中使用JavaScript直接操作DOM;
配合使用第三方JavaScript动画库,如Velocity;
上面四种方式其实主要就是两种,一个是利用CSS过渡或者动画,另一个是利用JavaScript钩子函数。
怎么应用过渡到元素/组件上
要想使元素或者组件应用到我们所写的过渡动画,需要使用vue提供的transition来封装组件成为过渡组件,transition需要与如下情景中的任一种一起使用:
v-if(条件渲染)
v-show(条件展示)
动态组件
在组建的根节点上,并且被vue实例DOM方法触发,如appendTo方法把组件添加到某个根节点上
当需要插入或者删除封装成过渡元素的元素时,vue将做如下事情:
查找目标元素是否有CSS过渡或者动画,如果有就在适当的时候进行处理;
如果过渡组件设置了JavaScript钩子函数,vue会在相应阶段调用钩子函数;
如果以上两者都没有,DOM操作(插入或者删除)就在下一帧立即执行。
CSS过渡
先举一个典型的CSS过渡的例子:
<!-- 首先将要过渡的元素用transition包裹,并设置过渡的name,然后添加触发这个元素过渡的按钮(实际项目中不一定是按钮,任何能触发过渡组件的DOM操作的操作都可以) -->
<div>
<button @click="show=!show">show</button>
<transition name="fade">
<p v-show="show">hello</p>
</transition>
</div>
// 接着为过渡类名添加规则
&.fade-enter-active, &.fade-leave-active
transition: all 0.5s ease
&.fade-enter, &.fade-leave-active
opacity: 0
封装上面的代码,就可以实现一个简单的动画了,CSS的transition属性是用来设置过渡总体效果的,具体可参考:http://www.w3cplus.com/content/css3-transition。
CSS过渡类名
组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name="fade",会有如下四个CSS类名:
fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;
fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成之后移除;
fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;
fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成之后被删除;
从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。
上面示例中,fade-enter和fade-leave-active类设置CSS为opacity:0,说明过渡刚进入和离开的时候透明度为0,即不显示。当然还可以设置其他的CSS属性,transform属性是除了opacity之外经常在这里被用到的,transform用法可参考http://www.w3cplus.com/content/css3-transition
CSS动画
组件过渡的实现不仅可以通过CSS过渡还可以通过CSS动画(animation)实现,建议先了解一下CSS3 Animation,这里还是给个例子:
<div>
<button @click="show=!show">show</button>
<transition name="fold">
<p v-show="show">hello</p>
</transition>
</div>
.fold-enter-active {
animation-name: fold-in;
animation-duration: .5s;
}
.fold-leave-active {
animation-name: fold-out;
animation-duration: .5s;
}
@keyframes fold-in {
0% {
transform: translate3d(0, 100%, 0);
}
50% {
transform: translate3d(0, 50%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes fold-out {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, 50%, 0);
}
100% {
transform: translate3d(0, 100%, 0);
}
}
如果预先了解了CSS动画(上面给了链接),上面代码还是很好理解的,要注意的是CSS动画中,fold-enter类名在节点插入DOM后不会立即删除,而是在animationed事件触发时删除。
自定义过渡类名
上面的四个过渡类名都是根据transition的name属性自动生成的,那么能否自己定义这四个类名呢?答案是可以的,通过enter-class、enter-active-class、leave-class、leave-active-class这四个特性来定义。
<div>
<button @click="show=!show">show</button>
<transition
name="fade"
enter-class="fade-in-enter"
enter-active-class="fade-in-active"
leave-class="fade-out-enter"
leave-active-class="fade-out-active"
>
<p v-show="show">hello</p>
</transition>
</div>
&.fade-in-active, &.fade-out-active
transition: all 0.5s ease
&.fade-in-enter, &.fade-out-active
opacity: 0
上面代码中,原来默认的fade-enter类对应fade-in-enter,fade-enter-active类对应fade-in-active,依次类推。
JavaScript钩子函数
除了用CSS过渡的动画来实现vue的组件过渡,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM。我们可以在属性中声明以下钩子:
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
</transition>
methods: {
// 过渡进入
// 设置过渡进入之前的组件状态
beforeEnter: function (el) {
// ...
},
// 设置过渡进入完成时的组件状态
enter: function (el, done) {
// ...
done()
},
// 设置过渡进入完成之后的组件状态
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// 过渡离开
// 设置过渡离开之前的组件状态
beforeLeave: function (el) {
// ...
},
// 设置过渡离开完成时地组件状态
leave: function (el, done) {
// ...
done()
},
// 设置过渡离开完成之后的组件状态
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
上面的钩子函数中可以进行任何你想做的DOM操作。
小技巧:如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果,这时你就可以用钩子函数,只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。
目前接触到的关于vue transition相关的就这么多了,当然vue transition的用法可不止这么点,这需要我以后的慢慢积累。
Vue2.0 Transition常见用法全解惑的更多相关文章
- vue2.0 transition -- demo实践填坑
前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...
- 【重点突破】—— Vue2.0 transition 动画Demo实践填坑
前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...
- vue2.0 transition 手风琴
<div class="food"> <button @click="show=!show">show</button> & ...
- vue2.0 transition 多个元素嵌套使用过渡
在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 我的代码:代码中元素整体做平移,里面的inner中做旋转,实现一个圆形滚动的效果 <transition n ...
- vue2.0 transition用法
html: <div id="demo"> <button v-on:click="show = !show"> Toggle < ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- Vue2.0组件实现动态搜索引擎(一)
原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
随机推荐
- spring roo反向工程
1.创建spring roo工程 2.在数据库中创建数据库feedback_schema,再创建几张表 3.创建连接数据库 persistence setup --provider HIBER ...
- git入门四(分支创建合并)
熟悉git分支的原理是掌握了git的精髓,因为git和我们常用的源码管理系统有很大的区别和优点在分支上可以体现出来,一般我们常用的源码管理系统分支都是需要创建新目录,有全新的源码copy,一般都需要创 ...
- nginx(Window下安装 & 配置文件参数说明 & 实例)
一.为什么需要对Tomcat服务器做负载均衡: Tomcat服务器作为一个Web服务器,其并发数在300-500之间,如果有超过500的并发数便会出现Tomcat不能响应新的请求的情况,严重影响网站 ...
- iOS 3DES加密
本文转载至 http://www.cocoachina.com/bbs/read.php?tid=177167 -(NSString *)TripleDES:(NSString *)plainText ...
- COGS 1507. [IOI2000]邮局
1507. [IOI2000]邮局 ★☆ 输入文件:postoffice.in 输出文件:postoffice.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] ...
- zoj 3716 Ribbon Gymnastics【神奇的计算几何】
题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3716 来源:http://acm.hust.edu.cn/vjudg ...
- Delphi中Message消息的三种使用方法(覆盖WndProc,覆盖消息函数,改写WMCommand)
实例1 unit Unit1; interfaceuses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Fo ...
- Python读属性文件
# coding:utf-8 class Properties: def __init__(self, file_name): self.file_name = file_name self.prop ...
- scala如何解决类型强转问题
scala如何解决类型强转问题 scala属于强类型语言,在指定变量类型时必须确定数据类型,即便scala拥有引以为傲的隐式推到,这某些场合也有些有心无力. 例如: java同属强类型语言,但java ...
- 读取ByteBuffer有效的数据
转:https://zhidao.baidu.com/question/427134449349230532.html说道 ByteBuffer的缓冲区,就需要知道缓冲区的的三个状态1)capacit ...