vue的过渡和动画
简单过渡
.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
}
}
});
过渡的类名
在进入/离开的过渡中,会有 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的过渡和动画的更多相关文章
- vue 同时使用过渡和动画
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue的过渡或动画
一.过渡的类名 在进入/离开的过渡中,共有6种class进行切换,分别是v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave ...
- Vue过渡和动画效果展示(案例、GIF动图演示、附源码)
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- Vue使用过渡类名实现动画和自定义前缀
Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...
- Vue——关于css过渡和动画那些事
1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...
- VUE:过渡&动画
VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...
- Vue过渡与动画
通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...
- 9、VUE过渡和动画
1.过渡效果 Vue提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加entering/leaving过渡. 我们注意到,<transition>标签的标记是 n ...
- (尚014)Vue过渡与动画
操作元素时有个过渡或动画的效果(渐变和移动的效果和放大缩小的效果) 过渡:trasition 动画:animation 1.vue动画的理解 1)操作css的trasition或animation(它 ...
随机推荐
- 分布式大数据多维数据分析(olap)引擎kylin[转]
Apache Kylin是一个开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay 开发并贡献至开源社区.它能在亚秒内查询巨大的Hiv ...
- swift - scrollview 判断左右移动, 以及上下两个view联动
核心代码 1. 2. 3. 界面代码VFL /* 浏览作品view*/ import UIKit /** * 图片浏览器(大图和缩略图) */ class JYBrowseWorksView: UIV ...
- swift - 使用系统app导航
import UIKit //1.导入框架 import MapKit class ViewController: UIViewController { lazy var geoCoder : CLG ...
- day 16 包,random,shutil
包: 函数过多,可以分模块文件去管理函数,模块文件过多,将模块文件分类放在一个个的文件夹中,这个文件夹就叫做包,组织结构更加清晰,合理! 模式就是被别人使用,包既然是一些模块的集合,也是被调用. 文件 ...
- http协议的学习
TPC/IP协议是传输层协议,主要解决数据如何在网络中传输,而HTTP是应用层协议,主要解决如何包装数据.
- 安装doxygen(一个自动文档生成工具)+Graphviz图形可视化软件
参考文章: http://www.fmddlmyy.cn/text21.html http://www.cnblogs.com/duguguiyu/archive/2008/06/29/1231852 ...
- ubuntu 安装Pangolin 过程
Pangolin 是一款开源的OPENGL显示库,可以用来视频显示.而且开发容易. 代码我们可以从Github 进行下载:https://github.com/zzx2GH/Pangolin.git ...
- js substring
substring的起始为左闭右开区间,也就是[1,3)结束位置为2,千万不要搞错了哦. 其他关于这个点的资料连接 聊聊左闭右开区间:https://www.cnblogs.com/owenandhi ...
- HTML day48
前端知识之HTML内容 HTML介绍 Web服务本质 import socket#引入套接字模块 sk = socket.socket()#实例化一个套接字对象 sk.bind(("12 ...
- opencv中imread第二个参数的意义
文档中是这么写的: Flags specifying the color type of a loaded image: CV_LOAD_IMAGE_ANYDEPTH - If set, return ...