Vue.js学习笔记九-使用transition-group元素实现列表的动画

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>

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值