当前位置：首页 > VUE

vue实现列表过渡

2026-02-18 02:07:25VUE

使用 `<transition-group>` 实现列表过渡

Vue 提供了 <transition-group> 组件专门用于列表过渡效果，支持元素动态添加、删除或顺序变化时的动画。以下是一个基础实现示例：

<template>
  <div>
    <button @click="addItem">添加项目</button>
    <button @click="removeItem">删除项目</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' }
      ],
      nextId: 3
    }
  },
  methods: {
    addItem() {
      this.items.push({ id: this.nextId++, text: `项目${this.nextId}` })
    },
    removeItem() {
      this.items.pop()
    }
  }
}
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

关键点说明

tag="ul" 指定渲染为 <ul> 元素，默认渲染为 <span>
每个列表项必须设置唯一的 :key
name="list" 会生成对应的 CSS 类名前缀（如 list-enter-active）
使用 v-move 类处理列表位置变化的动画（需配合 position: absolute）

进阶动画配置

可以通过 JavaScript 钩子实现更复杂的动画逻辑：

<transition-group
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <!-- 列表项 -->
</transition-group>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0
  },
  enter(el, done) {
    anime({
      targets: el,
      opacity: 1,
      translateY: 0,
      duration: 500,
      complete: done
    })
  }
}

排序动画优化

添加以下 CSS 可优化排序时的动画效果：

.list-move {
  transition: transform 0.5s;
}

第三方动画库集成

配合 animate.css 等库快速实现效果：

<transition-group
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutUp"
>
  <!-- 列表项 -->
</transition-group>

注意：使用第三方动画库时需要先引入对应的 CSS 文件。

vue实现列表过渡