vue2.0 之 过渡动画transtion
过渡的类名:
在进入/离开的过渡中,会有 6 个 class 切换 (v 是前缀,name = v)
v-enter
:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。v-enter-active
:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时v-enter
被删除),在transition/animation
完成之后移除。v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。v-leave-active
:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时v-leave
被删除),在transition/animation
完成之后移除。
过渡动画流程:
机制原理:
// 通过改变show的状态来切换动画
<div id="example-1">
<button @click="show = !show">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-1',
data: {
show: true
}
})
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
// 进入的动画 opacity: 0=>1, translateX: 10=>0
.slide-fade-enter-active {
transition: all .3s ease;
}
// 离开的动画 opacity: 1=>0, translateX: 0=>10
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
} // 进入第一帧和离开最后一帧的状态
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
自定义过渡类名:(一般与animate.css 配合使用)
// 第一种方法
<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition> // 第二种方法
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
使用JS钩子完成动画:(一般使用enter、after-enter、leave、after-leave即可)
<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) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
}, // 离开时 beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
注意:1、当只用 JavaScript 过渡的时候, 在 enter
和 leave
中,回调函数 done
是必须的 。否则,它们会被同步调用,过渡会立即完成。
2、推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"
,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
vue2.0 之 过渡动画transtion的更多相关文章
- android 5.0 -- Activity 过渡动画
android 5.0 提供3种过渡动画: 进入 退出 进入退出包括如下效果: explode 分解:屏幕中间进出 slide 滑动:屏幕边缘进出 fade 淡出:改变透明度来添加或者移除视图 共享 ...
- vue2.0学习之动画
下载animate.css <transition name="v"> <div class="content">需要做动画的内容< ...
- vue2.0中动画
#vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...
- Vue2.0 Transition常见用法全解惑
Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...
- 【重点突破】—— Vue2.0 transition 动画Demo实践填坑
前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...
- transtion:过渡动画
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...
- 实现Android5.0过渡动画兼容库
Android5.0之后为我们提供了许多炫酷的界面过渡效果,其中共享元素过渡也是很有亮点的一个效果,但这个效果只能在Android5.0之后使用,那今天我们就来将共享元素过渡效果兼容到Android4 ...
- vue2.0学习笔记之路由(二)路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0动画
相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...
随机推荐
- ACM ICPC 2011-2012 Northeastern European Regional Contest(NEERC)E Eve
E: 模拟题,一开始有n个人(有男有女),对于子女来说线粒体DNA是继承母亲的.然后有m个操作(按时间顺序),一种就是给了父亲,母亲的ID,生了一个孩子(编号从n+1开始往下):还有一个就是 -x , ...
- 对vi/vim的一些看法
早在网上看到别人如何把vi吹得神乎其神了,决定试着用一下.不过还是发现太麻烦了,因为我是在windows系统下面的,网络的原因无法使用linux系统(无校园电信客户端). 首先vim只是一个文本编辑器 ...
- redis--迁库操作
如果碰到redis库要迁移(之前的redis用作他用)或者备份用,就需要操作redis迁移 import redis def qianyi(k=None,v=None,name=None): r1 = ...
- 基于注解的springmvc开发
原理简析 1. 背景知识:org.springframework.web.ServletContainerInitializer接口 在基于注解的servlet开发中,ServletContainer ...
- 阶段3 1.Mybatis_02.Mybatis入门案例_1.mybatis的入门
H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\讲义+笔记+资料\主流框架\31.会员版(2.0)-就业课(2.0)-Mybatis\mybatis\mybatis_d ...
- Windows命令集锦
1.用于私网的IP地址段: 10.0.0.0/8: 10.0.0.0-10.255.255.255 172.16.0.0/12: 172.16.0.0-172.31.255.255 192.168.0 ...
- elasticsearch7.0安装及配置优化
简单讲ES开箱即用,不用任何配置也能玩转搜索引擎:以下内容是根据易企秀线上实际使用场景进行的安装和配置,支持冷热数据分离 1.安装 Linux 环境下载安装包 curl -L -O https://a ...
- python3 基本数据类型_2
#!/usr/bin/python3 #以下set,dict的方法py2无法运行 #创建set 集合,使用大括号 { } 或者 set() 函数创建 #注意:创建一个空集合必须用 set() 而不是 ...
- 解决react项目中跨域和axios封装使用
最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点 1.请求跨域问题 2.如何发起请求 3.axios的简单封装 全局安装create-react-app脚手架 ...
- java文件编译后,出现xx$1.class的原因
java编译后的文件名字带有$接数字的就是匿名内部类的编译结果,接名字的就是内部类的编译结果 例如:TestFrame$1.class是匿名内部类的编译结果, TestFrame$MyJob.clas ...