vue transition-group闭坑

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

半塘潮汐

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

阅读量233

点赞数

分类专栏： vue 文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_41340792/article/details/120289896

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue应用中使用transition-group和flip-list实现数据驱动的列表项动画效果，包括关键CSS类的使用和列表遍历中的key属性设置。适合前端开发者了解列表过渡的最佳实践。

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

 <transition-group
      name="flip-list"
      class="details"
      tag="div"
    >
   	< li v-for="item in list">
   		{{item.name}}
   	</li>
</transition-group>
data(){
	return {
		list:[
			{
				id:1,
				name:"1"
			},{
				id:2,
				name:"2"
			},{
				id:3,
				name:"3"
			},{
				id:4,
				name:"4"
			}
		]
	}
}
<style>
.flip-list-move{
  transition: all 2s linear;
}
.flip-list-leave-active{
  position: absolute;
}
</style>

【注】：
flip-list-move与flip-list-leave-active必须结合使用；transition-group 包裹的遍历li中必须加上key属性，而且key属性不能为v-for循环中的index，可以为item.id item.name之类，不然你的过渡css总会加载在最后一个列表项上