javascript - Vue.js 并非所有过渡组 child 都具有动画效果

Question

这是我正在使用的过渡组

<article class="hotel-row" v-for="hotel in paginatedHotels" :key="hotel.hotelid">
    <search-hotel :hotel="hotel"></search-hotel>
</article>

如果我不为子项设置关键帧，Vue 将抛出错误:

[Vue warn]: children must be keyed:

没问题，我添加了我唯一的 hotelid 以确保 Vue 可以区分元素。

我有一个包含 25 家酒店的列表，问题是当我键入子元素时，前 25 个结果中的元素以及更新酒店列表后的结果中的元素不会显示动画。

Vue 显然现在使用 :key 跟踪这些，并且发现不需要为这些子项设置动画。

我猜发生这种情况是因为列表中已经有一部分，所以为什么要再次为它们设置动画？不过，我的列表可以完全重新排序，因此我更愿意始终让所有项目都具有动画效果。

我可以清楚地看到，转换类没有添加到转换前后相同的元素中。

如何确保所有元素都具有动画效果？

Answer 1

要动画显示位置变化，您可以使用 v-move