Vue实现JSON数据列表排名变化时的过渡动画问题

核心问题：错误使用index作为key #

Vue的<transition-group>依赖稳定且唯一的key来识别元素的位置变化。你用数组索引index当key时，哪怕玩家排名调换位置，索引还是0、1、2，Vue会认为元素没变化，自然不会触发过渡动画。

修复步骤 #

1. 给每个玩家数据添加唯一标识 #

修改JSON数据，给每个玩家加独立唯一ID（如果玩家名称不会重复，也可以直接用名称）：

{
  "table": [
    ["Player1", 1, "p1"],
    ["Player2", 2, "p2"],
    ["Player3", 3, "p3"]
  ]
}

2. 把key绑定到唯一标识上 #

修改模板里的v-for和key绑定逻辑：

<transition-group name="flip-list">
  <div class="table-entry" v-for="player in players" :key="player[2]">
    <div class="name">{{ player[0] }}</div>
    <div class="rank">{{ player[1] }}</div>
  </div>
</transition-group>

如果用玩家名称当唯一标识，直接绑定player[0]即可。

3. 模拟实时数据更新（测试过渡效果） #

在Vue实例中添加代码模拟排名变化，触发响应式更新：

<script>
import game_data from './assets/game_data.json'
export default {
  name: 'App',
  data() {
    return {
      players: [...game_data.table], // 复制数组避免修改原数据
    };
  },
  mounted() {
    // 3秒后模拟排名调换
    setTimeout(() => {
      this.players = [
        ["Player3", 1, "p3"],
        ["Player2", 2, "p2"],
        ["Player1", 3, "p1"]
      ];
    }, 3000);
  },
};
</script>

4. 调整样式让过渡效果更直观 #

当前布局会让元素挤在一起，过渡位移不明显，修改样式：

#flip-list-demo {
  display: flex;
  flex-direction: column; /* 纵向排列元素 */
  gap: 10px; /* 元素间留间距 */
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.table-entry {
  display: grid;
  grid-template-columns: 100px 50px;
  place-items: center;
  border: 1px solid #ddd;
  padding: 8px;
  width: 150px;
}

.flip-list-move {
  transition: transform 0.8s ease; /* 更顺滑的过渡动画 */
}

修复原理 #

• 唯一key让Vue能精准识别每个元素的位置变化，而非复用旧组件
• 替换数组引用（this.players = 新数组）触发Vue响应式更新，让<transition-group>检测到元素顺序变更
• 调整布局样式后，过渡的位移效果会清晰可见

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