# transition-group

transition-group 是表示的一组动画，一般常配合 v-for 动态渲染使用，由于 transition 中只能是单个的元素，因此如果需要多个元素添加动画效果需要加入 transition-group 使用。

# 代码示例

	<transition-group name="myfade" tag="ul">
	<li v-for="item in dataList" :key="item.id">

	<Button type="text" @click="handleRemove(item)">remove</Button>
	</li>
	</transition-group>

# 需要注意的点

1、多个动画列表过渡时，必须设置 key 值！并且需要注意的是这个 key 不要使用 index 索引
2、 transition-group 与 transition 不同，它会以一个真实元素呈现：默认的是一个 span 标签包裹
如果使用的是 index 索引去处理，那么会有个问题，就是在删除的时候 Vue 的 diff 算法去寻找 dom 的差异性就会按照 index 从上往下去找其中的区别，就导致删除的永远是最后一项。

# 完整测试代码：

	<template>
	<div id="demo">
	<Row>
	<Col span="9">
	<div class="demo-input">
	<Input
	v-model="value"
	maxlength="10"
	show-word-limit
	clearable
	placeholder="请输入添加项..."
	style="width: 200px"
	/>
	<Button class="add-btn" type="success" @click="handleAdd"
	>添加</Button
	>
	</div>
	</Col>
	<Col span="15"> <span></span></Col>
	</Row>
	<div class="demo-input remove-btn">
	<h3>数据展示区:</h3>
	<transition-group name="myfade" tag="ul">
	<li v-for="item in dataList" :key="item.id">

	<Button type="text" @click="handleRemove(item)">remove</Button>
	</li>
	</transition-group>
	</div>
	</div>
	</template>

	<script>
	export default {
	name: "demo",
	data() {
	return {
	value: "",
	dataList: [],
	};
	},
	methods: {
	// 添加子项
	handleAdd() {
	this.dataList.push({
	id: new Date().getTime(),
	label: this.value,
	});
	this.value = "";
	console.log(this.dataList);
	},
	// 删除子项
	handleRemove(row) {
	console.log(row.id);
	this.dataList = this.dataList.filter((item) => item.id != row.id);
	console.log("删除操作", this.dataList);
	},
	},
	};
	</script>

	<style scoped>
	.demo-input {
	padding: 20px 10px;
	}
	.add-btn {
	margin-left: 10px;
	}
	.remove-btn li {
	width: 270px;
	height: 30px;
	display: flex;
	line-height: 30px;
	margin-bottom: 5px;
	padding: 0 10px;
	justify-content: space-between;
	}
	.remove-btn li:hover {
	border: 1px solid rgba(0, 0, 0, 0.1);
	}
	.remove-btn >>> .ivu-btn-text {
	color: #57a3f3;
	}
	.remove-btn >>> .ivu-btn-text:hover {
	color: red;
	background: transparent;
	}
	.remove-btn >>> .ivu-btn-text:focus {
	box-shadow: none;
	}
	/* 效果过程 */
	.myfade-enter-active,
	.myfade-leave-active {
	transition: all 0.8s linear;
	}
	/* 进场的瞬间与离场的效果添加 */
	.myfade-enter,
	.myfade-leave-to {
	opacity: 0;
	transform: translateX(200px);
	}
	</style>

css vue transition transition-group