vue过渡
vue在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果，下面主要总结一些常用的过渡。
单元素过渡（vue1.0）
我们常用的动画是css3的动画，在vue中依旧有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
#div1{
width:100px;
height:100px;
background: red;
}
.fade-transition{
transition: 1s all ease;
}
.fade-enter{
opacity: 0;
}
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" v-show="bSign" transition="fade"></div>
</div> <script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
}
});
</script>
</body>
</html>
在上面的例子中，我们实现了一个进入和离开的动画效果，我们需要做如下几步：
- 在需要使用动画的元素中添加名称，即上面的div中添加transition="fade"
- 根据添加的名称为元素添加class类实现动画效果，这些类必须以上一步总的名称开头
- 借用v-show进行条件展示
- 通过事件触发动画
过渡组件（vue2.0）
除了上面为元素添加动画名称的方式实现过渡外，vue还提供了transition的封装组件，在下列情况中，可以黑任何元素和组件添加进入或离开的过渡效果：
- 条件渲染（v-if）
- 条件展示（v-for）
- 动态组件
- 组件跟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="box">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div> <script>
new Vue({
el:'#box',
data: {
show: true
}
});
</script>
</body>
</html>
在上面的例子中，我们将需要实现动画效果的元素包裹在transition组件中，vue会自动嗅探目标元素是否应用了css过渡或动画，如果是，则会在恰当的时机添加或删除css类名。
过渡组件类名
vue在进入/离开的过渡中提供了6个可供选择的class切换，下面的例子我们只使用到了4个，关于6个类名的使用，在官方文档中详细说明。
- fade-enter：初始状态
- fade-enter-active：元素显示出来的状态（变化成什么样子）
- fade-leave：同fade-enter
- fade-leave-active：元素消失离开的状态
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<style>
p{
width:300px;
height:300px;
background: red;
}
.fade-enter-active, .fade-leave-active{
transition: 1s all ease;
} .fade-enter-active{
opacity:1;
width:300px;
height:300px;
}
.fade-leave-active{
opacity:0;
width:100px;
height:100px;
} .fade-enter,.fade-leave{
opacity:0;
width:100px;
height:100px;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition name="fade">
<p v-show="show"></p>
</transition>
</div>
</body>
</html>
需要说明的是，因为我们在transition组件中为此组件添加了一个名称name="fade"，所以我们的类名都是以该名称开头的，同上一个例子一样需要保持一致，但是这个组件名称不是必须的，所以我们也可以不用为组件添加名称，那么此时的类名就需要以v-开头，即上面的.fade-enter就需要换成v-enter了。
过渡组件相关函数
在使用过渡组件实现动画时，为了能更好的实现想要的动画效果，vue2.0中针对动画的不同状态给出了不同的动画函数，并且每个函数都接收一个代表当前运动元素的参数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
p{
width:200px;
height:200px;
background: red;
}
.fade-enter-active, .fade-leave-active{
transition: 1s all ease;
} .fade-enter-active{
opacity:1;
width:200px;
height:200px;
}
.fade-leave-active{
opacity:0;
width:100px;
height:100px;
} .fade-enter,.fade-leave{
opacity:0;
width:100px;
height:100px;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
},
methods:{
beforeEnter(el){
console.log('动画enter之前');
},
enter(el){
console.log('动画enter进入');
},
afterEnter(el){
console.log('动画进入之后');
el.style.background='blue';
},
beforeLeave(el){
console.log('动画leave之前');
},
leave(el){
console.log('动画leave');
},
afterLeave(el){
console.log('动画leave之后');
el.style.background='red';
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter" @before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<p v-show="show"></p>
</transition>
</div>
</body>
</html>
过渡组件之多个元素
和单一的过渡组件不同的是，多个元素的过渡组件使用的是transition-group，并且需要给组件内的多个元素添加一个key用作标识符，如下所示：
但是更多的时候，这个key是循环出来的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
p{
width:80px;
height:30px;
background: red;
margin:10px auto;
text-align: center;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div id="box">
<input type="text" v-model="show">
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
{{val}}
</p>
</transition-group>
</div>
<script>
new Vue({
el:'#box',
data:{
show:'',
list:['apple','banana','orange','pear']
},
computed:{
lists:function(){
var arr=[];
this.list.forEach(function(val){
if(val.indexOf(this.show)!=-1){
arr.push(val);
}
}.bind(this));
return arr;
}
}
});
</script>
</body>
</html>
css动画库
Animate.css是一款常见的动画库，在html中经常被使用，我们在vue1.0中依旧可以通过引用的方式使用。
在使用第三方动画库的时候，我们还是和上面的例子一样通过添加类名来实现动画，只是这里的类名不再是我们自己写的类，而是直接使用第三库中的类名，这里稍微做了一点改变的是，我们是在vue中添加了一个transitions，然后将所有的动画名称集中写在了这个里面而已。
首先需要为元素添加一个class类为： class="animated"，然后再添加动画名称transition="bounce"，最后根据动画名称进行定义相关动画类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<style>
#box{
width:400px;
margin: 0 auto;
}
#div1{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div> <script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定义所有动画名称
bounce:{
enterClass:'zoomInLeft',
leaveClass:'zoomOutRight'
}
}
});
</script>
</body>
</html>
但是在vue2.0中，使用上稍微有点不同，具体的有两种实现方式，分别如下所示：
vue过渡的更多相关文章
- 050——VUE中使用js库控制vue过渡动作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- Vue过渡mode属性踩坑
近期学习Vue的过渡效果的时候,mode属性的"in-out"."out-in"设置了不起作用,官网上的例子让我看了有点迷,问题解决后以此文记录之. 首先我们看 ...
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- Vue过渡状态
前面的话 Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢?包括数字和运算.颜色的显示.SVG 节点的位置.元素的大小和其他的属性等.所有的原始数字都被 ...
- Vue过渡动画—Vue学习笔记
要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...
- Vue 过渡
过渡 通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数 ...
- vue 过渡状态
vue的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢,例: 数字和运算 颜色的显示 svg节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来, ...
随机推荐
- P1373 小a和uim之大逃离（动态规划）
题目链接:传送门 题目大意: 一个N行M列的矩阵,从任意点开始往右或者往下走,每走一格获得所到达的格子的分数. 要求总步数必须为偶数.问有多少种走法,使得奇数步得到的总分和偶数步得到的总分对K+1取模 ...
- 51Nod 1084：矩阵取数问题 V2（多维DP）
1084 矩阵取数问题 V2 基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 关注 一个M*N矩阵中有不同的正整数,经过这个格子,就能获得相应价值的奖励 ...
- vmware NAT 网络出现问题的解决方法
nat 网络的配制: 用nat网络相对来说,以后网段出现改变,都不会有大的影响,方便以后做实验. 用dhclient 来获取IP dhclent -r 是用来关闭获取IP的. 自动获取IP,也可以改成 ...
- .net core 微服务架构-docker的部署-包括网关服务(Ocelot)+认证服务(IdentityServer4)+应用服务（asp.net core web api）
本文主要介绍通过Docker来部署通过.Net Core开发的微服务架构,部署的微服务主要包括统一网关(使用Ocelot开发).统一认证(IdentityServer4).应用服务(asp.net c ...
- java-类与类，类与接口，接口与接口的关系
1.类与类: - 继承关系,只能单继承,可以多层继承. 2.类与接口: - 实现关系,可以单实现,也可以多实现. - 并且还可以在继承一个类的同时实现多个接口. - * 例:class Demo ex ...
- （17）什么是jQuery（jq的流程和基本操作）
jQuery就是对原生js二次封装的工具类(在jq叫构造函数) jQuery就是一堆方法的集合,jq对象就可以直接调用这些方法来完成指定的需求 使用jq的流程: 1.在HTML页面倒入jq.js文件 ...
- sailsjs learning note
menu list: custom controller custom 模块使用 custom model custom middleware custom service ? 路由与对应的contr ...
- 【Jmeter】插件
一.插件管理 前提:很多时候,尤其是性能测试的时候,我们需要用到很多场景,需要得到一些参数值等等. 二.插件地址 URL : https://jmeter-plugins.org/downloads/ ...
- 【HAOI2012】容易题
终于自己做出一道题了quq 原题: 为了使得大家高兴,小Q特意出个自认为的简单题(easy)来满足大家,这道简单题是描述如下:有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[ ...
- MySQL InnoDB Engine--缓冲器数据交换
通常情况下,缓冲池无法将整个数据库所有数据都进行缓冲,而且不同数据的访问频率不一样,有些数据会被频繁访问,而有些数据可能数月不会被访问一次,因此数据库使用最近最少使用LRU latest Recent ...