My item list is displayed in a flex-box, forming a matrix with several rows and items per row. I use the
<transition-group class="move"><div v-for="item in items" :key="item.id">move {
transition: transform 1s;
}
Everything works perfectly when changing the order of items or adding new ones; all existing items smoothly move to their new positions.
However, when I remove items and create gaps in the list, the existing items do not fill these gaps smoothly. Instead, they jump to their new position without animation.
Why do the existing items behave differently, smoothly moving when a new item is added in between them but jumping back without animation when that same item is removed? How can I make the movement smooth in both scenarios?