Vue2 Transition-Group新增元素动画失效及键值警告问题

兄弟，我太懂你踩的这个坑了！你遇到的问题核心就是transition-group对key的严格要求，再加上可能忽略了tag属性的正确设置，咱们一步步拆解解决：

1. 先搞定控制台的key警告（这是根源） #

控制台提示<transition-group> children must be keyed: <tr>，说明你的<tr>没有绑定唯一且稳定的key值——注意，绝对不能用数组的index当key！

为什么？当你新增/删除列表项时，index会跟着变化，Vue无法精准识别每个元素的身份，删除时暂时正常是因为元素被直接移除，但新增时Vue会混淆元素的位置，导致动画失效甚至渲染异常。

正确做法： #

给每个列表项绑定自身的唯一标识（比如id字段）：

<tr v-for="item in yourList" :key="item.id">
  <!-- 列表项内容 -->
</tr>

2. 别忽略transition-group的tag属性（这是实际项目渲染失败的关键） #

你是用<tr>做列表项，而HTML规则里<tr>必须放在<tbody>里面！但transition-group默认的渲染标签是<span>，如果不指定tag="tbody"，就会出现<span>包裹<tr>的无效HTML结构，浏览器会自动修正DOM，直接导致新增的列表项渲染失败。

正确配置transition-group： #

<table>
  <transition-group tag="tbody" name="your-animation-name">
    <!-- 这里放你的<tr>列表项 -->
  </transition-group>
</table>

3. 确保动画CSS类名正确 #

别忘了给transition-group指定name后，对应的CSS过渡类要匹配：

/* 示例动画：淡入淡出+上下位移 */
.your-animation-name-enter-active, .your-animation-name-leave-active {
  transition: all 0.5s ease;
}
.your-animation-name-enter-from, .your-animation-name-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
/* 可选：处理删除时的布局跳动 */
.your-animation-name-leave-active {
  position: absolute;
}

完整可运行示例 #

给你贴个完整的表格增删动画例子，直接抄就能用：

<template>
  <div class="container">
    <button @click="addNewItem" class="add-btn">新增列表项</button>
    <table border="1" cellpadding="8">
      <thead>
        <tr>
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <!-- 关键：指定tag为tbody -->
      <transition-group tag="tbody" name="list-animate">
        <!-- 关键：用item.id做key -->
        <tr v-for="item in itemList" :key="item.id">
          <td>{{ item.name }}</td>
          <td><button @click="deleteItem(item.id)">删除</button></td>
        </tr>
      </transition-group>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: "初始项目1" },
        { id: 2, name: "初始项目2" }
      ],
      nextId: 3
    };
  },
  methods: {
    addNewItem() {
      this.itemList.push({
        id: this.nextId++,
        name: `新增项目${this.nextId - 1}`
      });
    },
    deleteItem(id) {
      // 用filter返回新数组，比splice更符合Vue响应式最佳实践（splice也可以，只要key正确）
      this.itemList = this.itemList.filter(item => item.id !== id);
    }
  }
};
</script>

<style scoped>
.container {
  margin: 20px;
}
.add-btn {
  margin-bottom: 10px;
  padding: 6px 12px;
}
/* 动画样式 */
.list-animate-enter-active, .list-animate-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.list-animate-enter-from, .list-animate-leave-to {
  opacity: 0;
  transform: translateY(15px);
}
/* 解决删除时的布局跳动 */
.list-animate-leave-active {
  position: absolute;
}
</style>

为什么移除transition-group就正常？ #

因为没有transition-group时，Vue只是做普通的列表渲染，即使你用index当key，浏览器也能勉强渲染（虽然不推荐）；但transition-group需要精准追踪每个元素的位置变化，一旦key不合法或者DOM结构错误，就会触发渲染异常和动画失效。

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