简单过渡

.fade-enter-active, .fade-leave-active {
transition: all .5s;
} /*.fade-enter, .fade-leave-to {
opacity: 0;
}*/
.fade-enter{
transform: translate(-100px,0);
} .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translate(500px,0);
}

fade要于<transition name="fade">要对应

<div id="app">
<button @click="toggle()">toggle</button>
<transition name="fade">
<p v-if="isShow">动画内容</p>
</transition> </div>
const vm = new Vue({
el: '#app',
data:{
isShow: true
},
methods:{
toggle(){
this.isShow = !this.isShow
}
}
});

过渡的类名

    1. 在进入/离开的过渡中,会有 6 个 class 切换。

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

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

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

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

      v-leave-active:
      定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

      v-leave-to:
      2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

css3动画

.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Loremetus.</p>
</transition>
</div>
new Vue({
el: '#example-2',
data: {
show: true
}
})

多个元素的过渡

<div id="app">
<button @click="toggle()">toggle</button>
<transition name="fade" mode="out-in">
<p v-if="isShow" key="first">第一个动画内容</p>
<p v-else key="second">第二个动画内容</p>
</transition>
</div>
 
.fade-enter-active, .fade-leave-active {
transition: all .5s;
} /*.fade-enter, .fade-leave-to {
opacity: 0;
}*/
.fade-enter{
transform: translate(-100px,0);
} .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translate(500px,0);
}

vue的过渡和动画的更多相关文章

  1. vue 同时使用过渡和动画

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue的过渡或动画

    一.过渡的类名 在进入/离开的过渡中,共有6种class进行切换,分别是v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave ...

  3. Vue过渡和动画效果展示(案例、GIF动图演示、附源码)

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  4. Vue使用过渡类名实现动画和自定义前缀

    Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...

  5. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

  6. VUE:过渡&动画

    VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...

  7. Vue过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...

  8. 9、VUE过渡和动画

    1.过渡效果 Vue提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加entering/leaving过渡. 我们注意到,<transition>标签的标记是 n ...

  9. (尚014)Vue过渡与动画

    操作元素时有个过渡或动画的效果(渐变和移动的效果和放大缩小的效果) 过渡:trasition 动画:animation 1.vue动画的理解 1)操作css的trasition或animation(它 ...

随机推荐

  1. 分布式大数据多维数据分析(olap)引擎kylin[转]

    Apache Kylin是一个开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay 开发并贡献至开源社区.它能在亚秒内查询巨大的Hiv ...

  2. swift - scrollview 判断左右移动, 以及上下两个view联动

    核心代码 1. 2. 3. 界面代码VFL /* 浏览作品view*/ import UIKit /** * 图片浏览器(大图和缩略图) */ class JYBrowseWorksView: UIV ...

  3. swift - 使用系统app导航

    import UIKit //1.导入框架 import MapKit class ViewController: UIViewController { lazy var geoCoder : CLG ...

  4. day 16 包,random,shutil

    包: 函数过多,可以分模块文件去管理函数,模块文件过多,将模块文件分类放在一个个的文件夹中,这个文件夹就叫做包,组织结构更加清晰,合理! 模式就是被别人使用,包既然是一些模块的集合,也是被调用. 文件 ...

  5. http协议的学习

    TPC/IP协议是传输层协议,主要解决数据如何在网络中传输,而HTTP是应用层协议,主要解决如何包装数据.

  6. 安装doxygen(一个自动文档生成工具)+Graphviz图形可视化软件

    参考文章: http://www.fmddlmyy.cn/text21.html http://www.cnblogs.com/duguguiyu/archive/2008/06/29/1231852 ...

  7. ubuntu 安装Pangolin 过程

    Pangolin 是一款开源的OPENGL显示库,可以用来视频显示.而且开发容易. 代码我们可以从Github 进行下载:https://github.com/zzx2GH/Pangolin.git ...

  8. js substring

    substring的起始为左闭右开区间,也就是[1,3)结束位置为2,千万不要搞错了哦. 其他关于这个点的资料连接 聊聊左闭右开区间:https://www.cnblogs.com/owenandhi ...

  9. HTML day48

    前端知识之HTML内容   HTML介绍 Web服务本质 import socket#引入套接字模块 sk = socket.socket()#实例化一个套接字对象 sk.bind(("12 ...

  10. opencv中imread第二个参数的意义

    文档中是这么写的: Flags specifying the color type of a loaded image: CV_LOAD_IMAGE_ANYDEPTH - If set, return ...