简单过渡

.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. jmeter简单压测设置

    参数化 随机参数 时间参数 顺序自增函数  文件读取  直接引用 响应断言 用来查看sessionid 关联 关联引用 jmeter操作数据库 安装连接程序包 ip 端口号 哪个数据库 可以执行多条s ...

  2. Myeclipse安装完配置

    1.Window --> preferences --> 搜索tomcat --> Tomcat7.x --> 选择Enable并导入tomcat所在目录2.Window -- ...

  3. cpio解压initramfs.img

    一.解压initramfs.img # mkdir test # cp /boot/initramfs.img /test # cd test # file initramfs.img initram ...

  4. AngularJS——第1章 简介

    第1章 简介 由谷歌公司开发维护的前端MVC框架,克服了HTML在构建应用上的诸多不足,降低了开发成本,提高了效率. 一个框架 以数据和逻辑作为驱动 AngularJS核心特性:模块化,双数据绑定,语 ...

  5. WorkerMan源码分析(resetStd方法,PHP中STDIN, STDOUT, STDERR的重定向)

    WorkerMan中work.php中 resetStd 方法中代码如下 public static function resetStd() { if (!static::$daemonize || ...

  6. linux操作系统-源码包安装jdk1.7

    1.下载安装文件 在oracle官方找不到bin二进制安装文件只能使用rpm包来安装 下载地址:http://www.oracle.com/technetwork/java/javase/downlo ...

  7. (转)数组使用contains

    数组使用contains 今天发现一个怪问题,同样是.net3.5环境下的两个项目,一个里支持arr.contains("1"),一个就不支持,代码完全相同也不行.有时在不支持项目 ...

  8. SQL Server 2008重新保存表时出错

    在使用SQL Server 2008时,修改了表的字段名和类型名之后,点击保存按钮之后出现如下对话框:

  9. Oracle VM VirtualBox如何设置网络地址转换NAT

    使用VirtualBox 安装好服务器后,需要设置网络,如果有IP, 则可以直接连接物理网络了, 如果没有,则可以直接使用NAT网络.设置方便快速. 先将虚拟机中的网络设置为自动获取,然后点击Virt ...

  10. Codeforces 791B. Bear and Friendship Condition 联通快 完全图

    B. Bear and Friendship Condition time limit per test:1 second memory limit per test:256 megabytes in ...