Vue.js并非所有过渡组儿童都是动画

时间:2017-08-01 13:43:18

标签: javascript animation vue.js vuejs2 vue-component

这是我正在使用的过渡组

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

如果我不给儿童打电话,Vue会抛出错误:

  

[Vue警告]:孩子必须得到钥匙:

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

我有25家酒店的列表,问题是,当我将我的孩子元素键入时,我的前25个结果中的元素以及更新我的酒店列表后的结果中的元素都没有动画。

Vue现在用:key显然跟踪这些,并且没有发现需要为这些孩子制作动画。

我猜这是因为已经有部分列表所以为什么再次为它们制作动画?我的列表可以完全重新排序,所以我宁愿总是让所有项目都有动画。

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

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

1 个答案:

答案 0 :(得分:2)

要设置您可以使用v-move

的位置变化动画