Vue.js not all transition group children are animating

Question

This is the transition group that I am using

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

Vue will throw an error if I do not key the children:

[Vue warn]: children must be keyed:

No problem I add my unique hotelid to make sure Vue can make a distinction between elements.

I have a list of 25 hotels and the problem is that when I keyed my child elements that the elements that were in my first 25 results and also in the results after updating my list of hotels do not animate.

Vue apparently tracks these now with the :key and does not find it needed to animate these children.

I am guessing this happens because there are already part of the list so why animate them again? My list can totally re-order though so I would prefer to always have all items animate.

I can clearly see that the transition classes are not added to elements that are the same before and after my transition.

How can I make sure all elements are animated though?

Answer 1

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