进入/离开 & 过渡 transition 和 animation（下）：列表过渡&动态过渡

最新推荐文章于 2023-08-17 14:18:00 发布

灵灵7

最新推荐文章于 2023-08-17 14:18:00 发布

阅读量1.4k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_41796631/article/details/85104085

版权

本文深入探讨了Vue.js中的列表过渡和动态过渡。在列表过渡部分，重点讲解了<transition-group>元素的使用，包括其对key属性的需求、v-for渲染和定位变化。而在动态过渡部分，介绍了通过name属性结合CSS实现不同效果，以及如何根据props值的改变来动态调整过渡效果。

摘要由CSDN通过智能技术生成

一、列表过渡

重点：

1. 使用元素 <transition-group>

2. 过渡模式不可用（mode="in-out/out-in"）

3. 需要有 key 属性值

4. 可用于 v-for 渲染的列表

5. 可用 `v-move` 特性改变元素定位

<style>
.list-item {
  display: inline-block;
  margin-right: 10px;
}

.change-enter-active{
color:#FF0000;
opacity: 0;
transition: 2s;
transform: translateX(30px) translateY(30px);
}

.change-enter-to{
color:#FF0000;
transform: translateX(0px) translateY(0px);
opacity:1;
}

.change-leave-to{
transition: all 1s;
opacity: 0;
transform: translateY(30px);
}

</style>

<body>
<div id="demo">
	<button v-on:click="shuffle">shuffle</button>
	<button v-on:click="add">add</button>
	<button v-on:click="remove">remove</button>
<br/>
 <transition-group name="change">
	<span v-for="list in lists" v-bind:key="list" class="list-item" >
			{
  {list}}
	</span>
</transition-group>
</div>

<script>
new Vue({
el:"#demo",
data:{
	lists:[0,1,2,3,4,5,6,7,8,9],
	nextNum:"10",
	randomIndex:""
	},
methods:{
	add:function(){
		var len=this.lists.length
		var ranNum=Math.floor(Math.random()*10)
		this.randomIndex