效果
实现代码文章来源：https://www.toymoban.com/news/detail-805103.html
<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文章来源地址https://www.toymoban.com/news/detail-805103.html
到了这里，关于vue列表飞入效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
