transition-group 列表过渡

列表的进入/离开过渡

<transition-group tag="ul">
	<!--tag转为ul-->
	<li v-for="item in list" :key="item">{{item}}</li>
	<!--子元素要有key-->
</transition-group>

注意：列表元素一定要有key

.v-enter,
.v-leave-to {
	opacity: 0;
	transform: translateX(30px);
}
.v-enter-active,
.v-leave-active {
	transition: all 1s;
}

See the Pen vue列表过渡 by lyc (@lyc) on CodePen.

列表的排序过渡

.v-move {
	transition: transform 1s;
}

See the Pen vue列表过渡-排序过渡 by lyc (@lyc) on CodePen.

列表过渡&排序过渡

See the Pen vue列表过渡&排序过渡 by lyc (@lyc) on CodePen.