transition-group标签实现列表过渡动画

为什么需要transition-group

因为我们有时不只是需要单个元素动画,有时需要一整个列表都附带动画
transition标签实现不了列表的群组动画,于是此时就有了transition-group

语法

  1. appear :用来指定是否在出场时用渲染动画
  2. tag:用来指定transition-group标签渲染后的默认标签,不指定,transition-group默认被渲染成span
  3. transition-group里面包裹的内容必须要指定key
<transition-group appear tag="ul">
	<li v-for="item in list" :key="item.id"></li>
</transition-group>

没有出场动画与有出场动画比较

没有出场动画

在这里插入图片描述

有出场动画

在这里插入图片描述

不设置tag标签,默认渲染成san标签

在这里插入图片描述

v-move类设置平滑过渡

v-move 类需要与v-leave-active类设置position:absolute

不设置v-move的问题

在这里插入图片描述

设置了v-move类

在这里插入图片描述

实例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title>Vue Template</title>
		<style type="text/css">
			ul li {
				border: 1px dashed gray;
				line-height: 30px;
				margin: 5px;
				width: 100%;
			}

			ul li:hover {
				background-color: #1E90FF;
				color: white;
			}

			.v-enter,
			.v-leave-to {
				opacity: 0;
				transform: translateY(80px);
			}

			.v-enter-active,
			.v-leave-active {
				transition: all 1s ease;
			}

			/* 移除元素比较突兀,所以使用v-move设置没被移除元素的动画,v-move要配置v-leave-active:{position:absolute} */
			.v-move {
				transition: all 1s ease;
			}

			.v-leave-active {
				position: absolute;
			}
		</style>
		<script src="../js/Vue/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<label>id</label><input type="text" name="" id="" v-model="id" />
			<label>name</label><input type="text" name="" id="" v-model="name" />
			<button type="button" @click="add">添加</button>

			<!-- 给transition-group设置属性appear实现入场动画,使得看起来不那么突兀 -->
			<transition-group appear tag="">
				<!-- 如果要为v-for循环创建的元素设置动画 必须要设置key -->
				<li v-for="(item,index) in list" :key="item.id" @click="del(item,index)">{{item.id}}----{{item.name}}</li>
			</transition-group>

		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					list: [{
							id: 1,
							name: '张三'
						},
						{
							id: 2,
							name: '李三'
						},
						{
							id: 3,
							name: '王五'
						},
						{
							id: 4,
							name: '赵六'
						}
					],
					id: '',
					name: ''
				},
				methods: {
					add: function() {
						this.list.push({
							id: this.id,
							name: this.name
						})
					},
					del: function(item, index) {
						console.log(index)
						this.list.splice(index, 1)
					}
				}
			})
		</script>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值