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

最新推荐文章于 2024-04-16 17:48:06 发布

武汉小喽啰

最新推荐文章于 2024-04-16 17:48:06 发布

阅读量867

点赞数

分类专栏： # vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/94055474

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

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
评论
Vue.js学习笔记九-使用transition-group元素实现列表的动画

1. 前面我们使用的动画都是单个元素的动画，用transition来实现的，今天我们学习一下列表的动画2.在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transition-group3. 例如：实现列表的动画效果<!DOCTYPE html><html lang="en"><h...
复制链接

扫一扫