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： cn.vuejs.org/guide/built-ins/transition-group.html