Vue3中使用<TransitionGroup>实现表格行平滑动画的方法

要在原生<table>元素上实现流畅的行增删动画，同时避免position:absolute导致的布局塌陷，核心是调整TransitionGroup的渲染结构和动画CSS逻辑——不用脱离文档流的定位，而是通过高度、透明度的过渡实现与添加动画反向的移除效果。

关键调整点 #

1. 修正TransitionGroup的渲染标签
   TransitionGroup默认渲染<div>，但在<table>里不合法，必须设置tag="tbody"，让它作为表格的tbody容器，内部直接放<tr>，符合HTML结构规范。

2. 重写离开动画CSS
   删掉position:absolute，改用max-height、opacity和transform的组合过渡，让移除的行逐渐收缩消失，同时其他行自然平滑上移，不会出现布局塌陷。

完整实现代码 #

<template>
  <table border="1" style="width: 100%; border-collapse: collapse;">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <!-- 把TransitionGroup渲染为tbody，符合表格DOM结构 -->
    <TransitionGroup tag="tbody" name="list">
      <tr v-for="item in items" :key="item.id" style="overflow: hidden;">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td><button @click="removeItem(item.id)">删除</button></td>
      </tr>
    </TransitionGroup>
  </table>
  <button @click="addItem">添加行</button>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
])
let nextId = 4

const addItem = () => {
  items.value.push({ id: nextId++, name: `Item ${nextId - 1}` })
}

const removeItem = (id) => {
  items.value = items.value.filter(item => item.id !== id)
}
</script>

<style>
/* 进入动画：从下方滑入，逐渐显示 */
.list-enter-from {
  opacity: 0;
  max-height: 0;
  transform: translateY(20px);
}
.list-enter-active {
  transition: all 0.3s ease-out;
}

/* 离开动画：向上滑出，逐渐收缩消失 */
.list-leave-to {
  opacity: 0;
  max-height: 0;
  transform: translateY(-20px);
}
.list-leave-active {
  transition: all 0.3s ease-in;
  /* 移除position:absolute，避免布局塌陷 */
}

/* 确保tr内容不溢出，配合max-height过渡生效 */
tr {
  transition: all 0.3s ease;
}
td {
  padding: 8px;
}
</style>

原理说明 #

• 用max-height过渡替代绝对定位，让行在移除时逐渐收缩高度，其他行随着这个过程自然上移，保持布局连贯性。
• 进入和离开动画通过transform方向相反（进入向下滑入，离开向上滑出），实现完全反向的动画效果。
• TransitionGroup渲染为tbody，既符合表格DOM结构要求，又能正确触发过渡动画。

内容的提问来源于stack exchange，提问作者InvisibleGorilla