过渡的类名:

在进入/离开的过渡中,会有 6 个 class 切换 (v 是前缀,name = v)

  1. v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

  2. v-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除),在 transition/animation 完成之后移除。

  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

  5. v-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

  6. 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的更多相关文章

  1. android 5.0 -- Activity 过渡动画

    android 5.0 提供3种过渡动画: 进入 退出 进入退出包括如下效果: explode 分解:屏幕中间进出 slide 滑动:屏幕边缘进出 fade 淡出:改变透明度来添加或者移除视图 共享 ...

  2. vue2.0学习之动画

    下载animate.css <transition name="v"> <div class="content">需要做动画的内容< ...

  3. vue2.0中动画

    #vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...

  4. Vue2.0 Transition常见用法全解惑

    Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...

  5. 【重点突破】—— Vue2.0 transition 动画Demo实践填坑

    前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...

  6. transtion:过渡动画

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...

  7. 实现Android5.0过渡动画兼容库

    Android5.0之后为我们提供了许多炫酷的界面过渡效果,其中共享元素过渡也是很有亮点的一个效果,但这个效果只能在Android5.0之后使用,那今天我们就来将共享元素过渡效果兼容到Android4 ...

  8. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue2.0动画

    相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...

随机推荐

  1. word文档每章的页眉页脚设置

    1. 每章后面插入分隔符,下一页. 2. 编辑页眉,取消选中链接的上一页,然后编辑页眉即可.

  2. ubuntu 18.04更换源

    sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak //备份 sudo vim /etc/apt/sources.list //修改 ##阿 ...

  3. java中FastJson的json类型转换

    JSON Gson: 来自Google,功能全面.快速.简洁.面向对象.数据传递和解析方便. Jackson:来源FasterXML项目,社区活跃,更新快 解析速度和效率比Gson快,但无法按需解析, ...

  4. CAN诊断学习

    汽车CAN总线有动力总成PCAN,底盘控制CCAN,整车控制BCAN,娱乐ECAN,诊断DCAN五种. CAN诊断,即是对CAN网络中各节点,各CAN总线,网关的故障进行检查与修复. 统一诊断服务(U ...

  5. linux配置ssh公钥认证,打通root用户的免密码输入的scp通道

    1.ssh-keygen ssh-keygen是unix-like系统的一个用来生成.管理ssh公钥和私钥的工具. 2.用法 常用的重要的选项有: -b num   指定生成多少比特长度的key,单位 ...

  6. 2018-5 - 热经 - 北京中地时空数码科技有限公司 - 研发工程师(WEBGIS 方向)

    一面: 登记,填写个人信息 笔试 选择题: HTML,CSS,JS 的选择题,都是基础题.其中有一道问哪个不是 document 的属性或方法,我在 bgColor 和 focus() 上面纠结了一下 ...

  7. 【MAC】 命令行解压缩 rar 文件

    使用Mac解压rar文件很简单,总共分2步.step1:安装解压工具,step2:解压 1.使用Homebrew安装unrar brew install unrar 2.cd到rar文件的目录下,然后 ...

  8. c++ 读取 utf-8 文件到 string

    #include <iostream> #include <assert.h> #include <fstream> #include <string> ...

  9. CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

    分组和嵌套  分组选择器 ——————>   嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...

  10. psp周总结02

      周日 周一 周二 周三 周四 周五 周六 所花时间 180 60 240 180 340 180 培训 代码量 186 65 157 86 200 200 博客量 1 1 了解的知识点 jsp页面 ...