如何在vue中创建带有动画的树视图

Question

我想在vue中创建一个带有动画的树视图组件。我的想法是在没有任何动画的情况下递归创建树视图，然后在它周围添加TransitionsGroup标签

因此，您将一个节点及其子节点(再次是一个节点数组及其子节点(传递给树组件，它就会创建树。生成的树是正确的，其HTML将如下所示：

<div v-if.. :key="..">
Root1
</div>
<div v-if.. :key="..">
Child1.1
</div>
<div v-if.. :key="..">
Child2.1
</div>
<div v-if.. :key="..">
Child2.2
</div>
<div v-if.. :key="..">
Child1.2
</div>

但如果我在像这样的TransitionGroup中添加这个组件

<TransitionGroup tag="div" name="fade">
<Tree :treeData="... /> 
</TransitionGroup>

我将收到警告，因为必须为TransitionGroup的子级设置键。所以我提供了一个。但这将导致以下信息：

Component inside <Transition> renders non-element root node that cannot be animated.

你怎么能做到这一点？我也将感谢任何其他解决这个问题的想法。

我还在Vue SFC Playground中创建了一个例子：Vue SFF Playground(Comp1是树组件，App.Vue中的第64行是问题所在(。

Answer 1

更新了Vue SFC游乐场

正如您的错误所暗示的，您没有有效的根节点，这是因为Comp1实际上有两个根节点：<div>和<template>。不仅如此，正如文件所说：

<TransitionGroup>是一个内置组件，用于为列表中渲染的元素或组件的插入、移除和顺序更改设置动画。

意味着<TransitionGroup>希望其根组件是多个渲染元素的v-for列表。因此，与其将整个Comp1组件封装在<TransitionGroup>中，不如只封装子元素的v-for列表：

<TransitionGroup name="fade">
<template v-for="(child, index) in treeData.children" :key="child.node.name + index.toString()">
<Comp1
v-if="isExpanded"
:treeData="child"
:indent="indent"
:depth="depth + 1"
/>  
</template>
</TransitionGroup>