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 ...
随机推荐
- word文档每章的页眉页脚设置
1. 每章后面插入分隔符,下一页. 2. 编辑页眉,取消选中链接的上一页,然后编辑页眉即可.
- ubuntu 18.04更换源
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak //备份 sudo vim /etc/apt/sources.list //修改 ##阿 ...
- java中FastJson的json类型转换
JSON Gson: 来自Google,功能全面.快速.简洁.面向对象.数据传递和解析方便. Jackson:来源FasterXML项目,社区活跃,更新快 解析速度和效率比Gson快,但无法按需解析, ...
- CAN诊断学习
汽车CAN总线有动力总成PCAN,底盘控制CCAN,整车控制BCAN,娱乐ECAN,诊断DCAN五种. CAN诊断,即是对CAN网络中各节点,各CAN总线,网关的故障进行检查与修复. 统一诊断服务(U ...
- linux配置ssh公钥认证,打通root用户的免密码输入的scp通道
1.ssh-keygen ssh-keygen是unix-like系统的一个用来生成.管理ssh公钥和私钥的工具. 2.用法 常用的重要的选项有: -b num 指定生成多少比特长度的key,单位 ...
- 2018-5 - 热经 - 北京中地时空数码科技有限公司 - 研发工程师(WEBGIS 方向)
一面: 登记,填写个人信息 笔试 选择题: HTML,CSS,JS 的选择题,都是基础题.其中有一道问哪个不是 document 的属性或方法,我在 bgColor 和 focus() 上面纠结了一下 ...
- 【MAC】 命令行解压缩 rar 文件
使用Mac解压rar文件很简单,总共分2步.step1:安装解压工具,step2:解压 1.使用Homebrew安装unrar brew install unrar 2.cd到rar文件的目录下,然后 ...
- c++ 读取 utf-8 文件到 string
#include <iostream> #include <assert.h> #include <fstream> #include <string> ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
- psp周总结02
周日 周一 周二 周三 周四 周五 周六 所花时间 180 60 240 180 340 180 培训 代码量 186 65 157 86 200 200 博客量 1 1 了解的知识点 jsp页面 ...