Я получил список элементов, в котором каждый элемент помещен во флекс-бокс, отображающий список в виде матрицы (несколько строк и элементов в строке). Используя <transition-group class="move">, я применяю простой переход перемещения к <div v-for="item in items" :key="item.id">
move {
transition: transform 1s;
}
. Теперь это прекрасно работает при изменении порядка элементов или при добавлении новых элементов; Это означает, что все существующие элементы плавно перемещаются на новое место.
Но: если я удаляю элементы из списка и возникают некоторые пробелы, существующие элементы НЕ заполняют эти пробелы плавно, а переходят на новую позицию без анимации.
В чем причина того, что существующие элементы ведут себя по-разному, плавно перемещаясь в своей новой позиции, если между ними помещается новый элемент, но без анимации отскакивают назад, когда удаляется тот же элемент? Как мне добиться плавного движения в обе стороны?