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