vue列表飞入效果

效果

实现代码

<template><div><button @click="add">添加</button><TransitionGroup name="list" tag="ul"><div class="list-item" v-for="item in items" :key="item.id">{{ item.name }}</div></TransitionGroup></div>
</template><script setup>// 创建一个 ref 响应式数组来存储数据import { ref } from 'vue'const items = ref([])// 添加数据的函数function add() {// 定时添加5条数据for (let i = 0; i < 5; i++) {setTimeout(() => {// 在数组的开头插入新数据items.value.unshift({id: Date.now(),name: 'item ' + items.value.length})}, 500 * i)}}
</script><style scoped>/* 在动画开始和结束时应用的样式 */.list-enter-active,.list-leave-active {transition: all 1s ease;}/* 在动画开始时应用的样式 */.list-enter-from,.list-leave-to {opacity: 0; /* 设置透明度为0 */transform: translateX(100px); /* 水平移动100px */}/* 单个列表项的样式 */.list-item {margin: 10px;border: 1px solid #ccc;padding: 10px;height: 30px;width: 200px;}
</style>

此处用到的是TransitionGroup：https://cn.vuejs.org/guide/built-ins/transition-group.html