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(它 ...
随机推荐
- jmeter简单压测设置
参数化 随机参数 时间参数 顺序自增函数 文件读取 直接引用 响应断言 用来查看sessionid 关联 关联引用 jmeter操作数据库 安装连接程序包 ip 端口号 哪个数据库 可以执行多条s ...
- Myeclipse安装完配置
1.Window --> preferences --> 搜索tomcat --> Tomcat7.x --> 选择Enable并导入tomcat所在目录2.Window -- ...
- cpio解压initramfs.img
一.解压initramfs.img # mkdir test # cp /boot/initramfs.img /test # cd test # file initramfs.img initram ...
- AngularJS——第1章 简介
第1章 简介 由谷歌公司开发维护的前端MVC框架,克服了HTML在构建应用上的诸多不足,降低了开发成本,提高了效率. 一个框架 以数据和逻辑作为驱动 AngularJS核心特性:模块化,双数据绑定,语 ...
- WorkerMan源码分析(resetStd方法,PHP中STDIN, STDOUT, STDERR的重定向)
WorkerMan中work.php中 resetStd 方法中代码如下 public static function resetStd() { if (!static::$daemonize || ...
- linux操作系统-源码包安装jdk1.7
1.下载安装文件 在oracle官方找不到bin二进制安装文件只能使用rpm包来安装 下载地址:http://www.oracle.com/technetwork/java/javase/downlo ...
- (转)数组使用contains
数组使用contains 今天发现一个怪问题,同样是.net3.5环境下的两个项目,一个里支持arr.contains("1"),一个就不支持,代码完全相同也不行.有时在不支持项目 ...
- SQL Server 2008重新保存表时出错
在使用SQL Server 2008时,修改了表的字段名和类型名之后,点击保存按钮之后出现如下对话框:
- Oracle VM VirtualBox如何设置网络地址转换NAT
使用VirtualBox 安装好服务器后,需要设置网络,如果有IP, 则可以直接连接物理网络了, 如果没有,则可以直接使用NAT网络.设置方便快速. 先将虚拟机中的网络设置为自动获取,然后点击Virt ...
- Codeforces 791B. Bear and Friendship Condition 联通快 完全图
B. Bear and Friendship Condition time limit per test:1 second memory limit per test:256 megabytes in ...