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

最新推荐文章于 2024-09-25 15:49:24 发布

百日梦想家

最新推荐文章于 2024-09-25 15:49:24 发布

阅读量2.7k

点赞数

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

本文链接：https://blog.csdn.net/qq_42418169/article/details/108296844

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

文章目录

为什么需要transition-group
语法
v-move类设置平滑过渡
- 不设置v-move的问题
- 设置了v-move类
实例

为什么需要transition-group

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

语法

appear :用来指定是否在出场时用渲染动画
tag:用来指定transition-group标签渲染后的默认标签，不指定，transition-group默认被渲染成span
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>