Javascript Vue-过渡组不使用不同类型的组件

我有一个项目，其中我使用Vue转换来设置包含汽车组件的网格的排序和过滤动画。每个栅格元素包含一个汽车零部件

问题是用户可以邀请新用户加入平台。这些新用户/汽车与汽车组件中显示的现有对象不同。在这些新对象中，我显示了不同类型的数据/信息

这就是为什么我选择向这些“新”用户展示与汽车部件不同类型的部件

问题是这两个组件都需要显示在同一个CSS网格中。但是，当我尝试在一个过渡组中添加这两个组件时，该过渡组将中断，并且不再执行排序动画

<transition-group class="grid">
   <InvitedUsers v-for="invite in Invited" />
   <Users v-for"user in Users" />
</transition-group>

有办法解决这个问题吗？我是否可以在同一CSS网格中添加一组bot项，并且仍然让转换组执行其工作？我尝试了以下方法，但不起作用，因为这两组项都是在不同的网格中创建的。但这样，过渡小组又开始工作了

<div class="grid">
   <InvitedUsers v-for="invite in Invited" />
</div>
<transition-group class="grid">
   <Users v-for"user in Users" />
</transition-group>

---

我曾经为同样的问题挣扎过一次。我们不能直接在内部包装组件，必须在组件周围有另一个包装器

这里有一个例子

<transition-group class="grid">
   <div v-for"user in Users">
     <Users />
   </div>
   <div v-for="invite in Invited">
     <InvitedUsers />
   </div>
</transition-group>

您可能需要稍微调整网格容器