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节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来, ...
随机推荐
- PostgreSQL的配置文件
PostgreSQL的配置文件主要有如下3个(postgresql.conf,pg_hba.conf,pg_ident.conf)可以通过如下方式查找:postgres=# select name, ...
- java第一节感受
第一节java课考试,感觉自从小学期和实习过了以后就等这个测试了,测试过了以后就是中秋节了,下周再上一节java又放国庆节了. 当时报软工的时候就早早地做好了心理准备,但是当亲身经历一遍后真的有了一种 ...
- 构建工具 buildtool
一.什么是build tool? 构建工具是从源代码自动创建可执行应用程序的程序.构建包括将代码编译,链接和打包成可用或可执行的形式.在小项目中,开发人员通常会手动调用构建过程.这对于较大的项目来说是 ...
- （20）jQuery的文档操作（创建，添加、设置样式和删除等）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...
- oracle数据库丢失数据文件、控制文件、重做日志文件、初始化文件恢复方法
rman target/ list backup; 查看是否已备份,如果没有,那就不知道了 模拟故障,删除/u01/app/oracle/oradata/ORCL文件夹下的所有文件 sqlplus ...
- tomcat7简单优化
生产环境下我们不应该使用root用户开启tomcat服务,所以为了安全起见,我们创建一个用户tomcat useradd tomcat passwd tomcat(密码也设为tomcat) 编辑tom ...
- 使用ipns 解决ipfs 内容更新的问题
ipds 可以使用dnslink 解决域名访问的问题,但是内容变更我们就会有新的hashid 解决方法我们可以使用ipns ,同时解决dnslink 解决域名的问题 环境准备 docker-compo ...
- Linux服务器定位CPU高占用率代码位置经历
http://blog.csdn.net/zhu19774279/article/details/51303000
- Zabbix-2.4-安装-4
Zabbix api 对于以上两种方式,有些人都不选,倾向于使用第三种:使用zabbix api加上这个监控在把这台机器删除了,然后discovery和自动注册的都关闭了再换一种方式把它加进去,zab ...
- 2、visualBox虚拟机扩容
1.找到VBoxManager工具 1)打开Finder,找到[应用程序],在右侧找到VirtualBox.app,然后打开右键,找到[显示包内容],点击打开 2.打开终端,来到这个目录下 cd /A ...