要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中。

原理:通过在特定的时刻增加/移除样式实现。

一、Vue中的过度效果

1.未声明name,Vue默认添加/移除v-enter,v-leave-to,v-enter-active,v-leave-active来实现

v-enter决定元素在加入dom时的样式

v-enter-active决定样式执行状态

v-leave-to对应移除的

实例:为元素添加显示隐藏的过度效果

<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition>
<h3 v-if="show">Hi Boy</h3>
</transition>
<button @click="handleClick">DoIt</button>
</div>
</body>
<script> var app=new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function(){
this.show=!this.show
}
}
})
</script>

2.如果声明了对应的name则可以改写为

css:

<style>
.fade-enter,.fade-leave-to{
opacity:;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 1s;
}
</style>

html:

<div id="app">
<transition name="fade">
<h3 v-if="show">Hi Boy</h3>
</transition>
<button @click="handleClick">DoIt</button>
</div>

二、Vue中的动画效果

1.使用自定义动画

html不变,关键是css变为如下

@keyframes myfade{
from{opacity:}
to{opacity:}
}
.fade-enter-active{
animation: myfade 1s;
}
.fade-leave-active{
animation: myfade 1s reverse;
}

实现效果一样,此时我们用的动画,当然动画还有很多效果。

2.采用Animate.css库文件实现动画

使用库文件时我们需要知道除了通过那么调用的另一种调用方法

直接在class中自定义调用的样式

css:

@keyframes myfade{
from{opacity:}
to{opacity:}
}
.enter{
animation: myfade 1s;
}
.leave{
animation: myfade 1s reverse;
}

html:

<transition name="fade"
enter-active-class="enter"
leave-active-class="leave"
>
<h3 v-if="show">Hi Boy</h3>
</transition>

此时的enter和leave时我们完全自定义的样式名。

如果向调用animate.css库只需要改写html

如下:

<transition name="fade"
enter-active-class="animated bounce"
leave-active-class="animated bounce"
>
<h3 v-if="show">Hi Boy</h3>
</transition>

bounce未调用的动画名。提示前面必须加animated。

具体想要使用什么动画请看animate.css官网

提示:如果想要在页面初始化时播放动画需要添加appear和appear-active-class

<transition name="fade"
appear
enter-active-class="animated shake"
leave-active-class="animated bounce"
appear-active-class="animated shake"
>
<h3 v-if="show">Hi Boy</h3>
</transition>

三、过度效果和动画效果混用

例子如下:

<style>
@keyframes myfade{
from{opacity: 0}
to{opacity: 1}
}
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade"
appear
enter-active-class="animated shake fade-enter-active"
leave-active-class="animated bounce fade-leave-active"
appear-active-class="animated shake"
>
<h3 v-if="show">Hi Boy</h3>
</transition>
<button @click="handleClick">DoIt</button>
</div>
</body>

警告:此时opacity过渡动画是3秒,animate.css动画未1秒,执行时间不统一。

解决方法:添加type属性如

type="transition" 以过度效果执行时间执行

type="animation"以动画效果执行时间执行

<transition name="fade" type="transition"
appear
enter-active-class="animated shake fade-enter-active"
leave-active-class="animated bounce fade-leave-active"
appear-active-class="animated shake"
>

2.自定义动画时间

:duration="时长(毫秒)"一般定义

:duration="{enter:1000,leave:2000}"//分别定义出场和入场时长

<transition name="fade" :duration="10000"
appear
enter-active-class="animated shake fade-enter-active"
leave-active-class="animated bounce fade-leave-active"
appear-active-class="animated shake"
>
<h3 v-if="show">Hi Boy</h3>
</transition>

Vue过渡动画—Vue学习笔记的更多相关文章

  1. (学习心路历程)Vue过渡/动画 VS. 过渡/动画

    [此篇为本人的个人见解和哔哔赖赖,如果有观点不对的地方,还请大家指出来哇!!] 最近实习在做一个项目,里面应用的动画效果还蛮复杂的,因为本身对Vue框架比较熟悉,所以最终选择了Vue框架. 自己之前从 ...

  2. Vue.js 源码学习笔记

    最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...

  3. vue过渡动画

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  4. vue过渡动画效果

    1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...

  5. vue过渡 & 动画---进入/离开 & 列表过渡

    (1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...

  6. Vue过渡动画运用transition

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...

  7. Vue.js 第3章 axios&Vue过渡动画

    promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...

  8. vue 过渡 & 动画

    过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...

  9. vue过渡动画样式

    在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义进入过渡生效时的 ...

随机推荐

  1. 再读c++primer plus 001

    1. OOP强调的是在运行阶段(而不是编译阶段)进行决策,运行阶段指的是程序正在运行时,编译阶段指的是编译器将程序组合起来时. 2.变量的值都存储在栈中,而new从被称为堆或自由存储区的内存区域分配内 ...

  2. java笔记--问题总结

    1. 垃圾回收算法 标记-清除算法 标记-清除算法是最基本的算法,和他的名字一样,分为两个步骤,一个步骤是标记需要回收的对象.在标记完成后统一回收被标记的对象.这个算法两个问题.一个是效率问题,标记和 ...

  3. win/mac平台搭建ionic开发环境教程(转)

    出处:http://www.ionic-china.com/doc/ionic-winmac.html#preface 前言 ionic中文网为大家准备了绿色版的nodejs和androidSDK以及 ...

  4. 第14章:MongoDB-聚合操作--聚合管道

    ① 聚合管道是MongoDB2.2版本引入的新功能.它由阶段(Stage)组成,文档在一个阶段处理完毕后,聚合管道会把处理结果传到下一个阶段. 每个阶段用阶段操作符(Stage Operators)定 ...

  5. i2c设备驱动注册

      Linux I2C设备驱动编写(二) 原创 2014年03月16日 23:26:50   在(一)中简述了Linux I2C子系统的三个主要成员i2c_adapter.i2c_driver.i2c ...

  6. 多表更新时碰到的 ERROR 1292 (22007)隐式转换错误

    表结构如下: Create Table: CREATE TABLE `test_t2` ( `id` int(11) NOT NULL AUTO_INCREMENT, `customer_no` va ...

  7. 快速创建一个 Servlet 项目(2)

    1. 新建一个 webapp 参考 http://www.cnblogs.com/zno2/p/5909019.html 2.调整jdk版本 修改 pom.xml 文件,将jdk 调整为适当的版本,比 ...

  8. C#-VS配置开发环境-摘

    配置开发环境   包含的开发环境 LightSwith LightSwitch 微软出品 web界面开发部署非常方便

  9. (转)Tomcat(java运行环境)安装及配置教程

    转自:http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html 用来进行web开发的工具有很多,Tomcat是其中一个开源的且免费的 ...

  10. (转)设置VMWARE通过桥接方式使用主机无线网卡上网

    转自:http://www.cnblogs.com/liongis/p/3265458.html 环境:WIN7旗舰版,台式机,U盘无线上网卡. 虚拟软件:VMware9.0,虚拟系统:CentOS6 ...