如何在Vue中创建带动画效果的Treeview组件？

问题描述 #

想在Vue中实现带动画效果的递归Treeview组件，先完成了无动画版本，生成的HTML结构正确，但尝试用<TransitionGroup>包裹整个Tree组件时：

1. 先收到警告：TransitionGroup的子元素必须绑定key
2. 添加key后又触发错误：Component inside <Transition> renders non-element root node that cannot be animated.

核心原因 #

你的Tree组件（Comp1）是多根组件（直接渲染多个同级div节点），而<Transition>/<TransitionGroup>要求其子组件必须有单个根元素，才能正确绑定动画状态。

解决方案 #

方案一：在递归内部使用TransitionGroup（推荐） #

不需要在外部包裹整个Tree组件，而是在递归组件内部，给每个层级的子节点列表添加<TransitionGroup>，实现单个节点的展开/收起动画：

修改Tree组件（Comp1.vue）代码：

<template>
  <!-- 单个根容器，解决多根节点问题 -->
  <div class="tree-node">
    <!-- 当前节点标题 -->
    <div :key="node.id" @click="toggleExpand">
      {{ node.label }}
    </div>
    <!-- 子节点列表用TransitionGroup包裹，实现动画 -->
    <TransitionGroup 
      v-if="expanded" 
      tag="div" 
      name="fade" 
      class="child-nodes"
    >
      <Comp1
        v-for="child in node.children"
        :key="child.id"
        :treeData="child"
      />
    </TransitionGroup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['treeData'])
const node = props.treeData
const expanded = ref(false)

const toggleExpand = () => {
  expanded.value = !expanded.value
}
</script>

<style scoped>
/* 动画样式 */
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateX(10px);
}
.fade-enter-active, .fade-leave-active {
  transition: all 0.3s ease;
}

/* 子节点缩进样式 */
.child-nodes {
  margin-left: 20px;
}
</style>

App.vue中直接使用组件即可，无需外部包裹TransitionGroup：

<template>
  <Comp1 :treeData="treeData" />
</template>

方案二：给Tree组件添加单个根容器（仅解决报错） #

如果只是想解决报错，可给Tree组件的所有节点包裹一个单个容器div，但这种方式只能给整个树添加动画，无法实现单个节点的展开/收起动画：

修改Comp1.vue的根节点：

<template>
  <!-- 添加单个根容器 -->
  <div class="tree-container">
    <div v-if="treeData" :key="treeData.id" @click="toggle">
      {{ treeData.label }}
    </div>
    <Comp1
      v-for="child in treeData.children"
      :key="child.id"
      :treeData="child"
      v-show="expanded"
    />
  </div>
</template>

此时外部可以用TransitionGroup包裹，但动画是针对整个树的，而非单个节点。

关键说明 #

• <TransitionGroup>的核心作用是给列表中的多个元素添加动画，所以应该作用在子节点列表上，而非整个组件。
• Vue的Transition系列组件要求子元素必须是单个根元素，多根组件会导致动画无法绑定，这是报错的直接原因。

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