1. 前面我们使用的动画都是单个元素的动画,用transition来实现的,今天我们学习一下列表的动画
2. 在实现列表过渡的时候,如果需要过渡的元素是通过v-for循环渲染出来的,不能使用transition包裹, 需要使用transition-group
3. 例如:实现列表的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue_2.6.1.js"></script>
<link rel="stylesheet" href="./lib/bootstrap.css"></link>
<style>
li {
margin: 10px;
border: dashed black 1px;
line-height: 40px;
}
li:hover{
background: pink;
transition: all 0.4s ease; /*定义背景颜色的动画效果*/
}
#head {
margin: 20px;
}
/*定义动画效果*/
.v-enter,
.v-leave-to{
opacity: 0; /* 表示动画开始和结束之后状态保持一致 */
}
/*
.v-enter-active 入场动画的时间段
.v-leave-active 离场动画的时间段
* */
.v-enter-active,
.v-leave-active{
transition:all 0.8s ease; /* 表示 transition包裹的所有元素都执行该动画*/
}
</style>
</head>
<body>
<div id="app">
<div id='head'>
<label>id:</label><input type="txt" v-model="id"/>
<label>姓名:</label><input type="txt" v-model="name"/>
<button @click="add"> 添加 </button>
</div>
<ul>
<!--
作者:zoudmbean@163.com
时间:2019-06-28
描述:在实现列表过渡的时候,如果需要过渡的元素是通过v-for循环渲染出来的,不能使用transition包裹,
需要使用transition-group
-->
<transition-group>
<li v-for="item in list" :key="item.id">
{{item.name}}
</li>
</transition-group>
</ul>
</div>
<script>
// 创建Vue实例,得到viemodel
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1001,name:'张三'},
{id:1002,name:'李四'},
{id:1003,name:'王五'}
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name});
}
}
});
</script>
</body>
</html>
4. 设置删除列表的动画效果
4.1 格式:固定写法 .v-mve与.v-leave-active配合使用,能够实现列表后续的元素渐渐的飘上来
/*定义移除的动画效果
注意:移除的动画类的写法是以下固定写法
* */
.v-move{
transition:all 0.8s ease; /* 表示 transition包裹的所有元素都执行该动画*/
}
.v-leave-active{
position: absolute; /*注意,绝对定位有一个特点,就是宽度是最小值,所以,最好是指定宽度*/
}
4.3 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue_2.6.1.js"></script>
<link rel="stylesheet" href="./lib/bootstrap.css"></link>
<style>
li {
margin: 10px;
border: dashed black 1px;
line-height: 40px;
width: 100%;
}
li:hover{
background: pink;
transition: all 0.4s ease; /*定义背景颜色的动画效果*/
}
#head {
margin: 20px;
}
/*定义动画效果*/
.v-enter,
.v-leave-to{
opacity: 0; /* 表示动画开始和结束之后状态保持一致 */
}
/*
.v-enter-active 入场动画的时间段
.v-leave-active 离场动画的时间段
* */
.v-enter-active,
.v-leave-active{
transition:all 0.8s ease; /* 表示 transition包裹的所有元素都执行该动画*/
}
/*定义移除的动画效果
注意:移除的动画类的写法是以下固定写法
* */
.v-move{
transition:all 0.8s ease; /* 表示 transition包裹的所有元素都执行该动画*/
}
.v-leave-active{
position: absolute; /*注意,绝对定位有一个特点,就是宽度是最小值,所以,最好是指定宽度*/
}
</style>
</head>
<body>
<div id="app">
<div id='head'>
<label>id:</label><input type="txt" v-model="id"/>
<label>姓名:</label><input type="txt" v-model="name"/>
<button @click="add"> 添加 </button>
</div>
<ul>
<!--
作者:zoudmbean@163.com
时间:2019-06-28
描述:在实现列表过渡的时候,如果需要过渡的元素是通过v-for循环渲染出来的,不能使用transition包裹,
需要使用transition-group
-->
<transition-group>
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.name}}
</li>
</transition-group>
</ul>
</div>
<script>
// 创建Vue实例,得到viemodel
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1001,name:'张三'},
{id:1002,name:'李四'},
{id:1003,name:'王五'}
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name});
},
del(id){
this.list.splice(id,1);
}
}
});
</script>
</body>
</html>
4.4 给transition-group加入动画效果,只需要在transition-group上加appear
4.5 appear和tag属性的作用
appear属性:一般用于设置背景色
tag属性:只需要一个人负责一个线程
<transition-group eppear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.name}}
</li>
</transition-group>