Перечисление переходов в vuejs, изменение базового массива

Question

Мне нужно иметь возможность анимировать перетаскивание в моем вертикальном списке.Я использовал vuedraggable, завернул свой список в transition-group, и все заработало.Пока я не получу новые данные с сервера.Теперь из-за введения transition-group на долю секунды старые данные и новые данные живут вместе в DOM, вызывая расширение списка и подталкивая последующие div вниз и назад.Это что-то вроде ожидаемого для документов:

операции DOM для вставки и / или удаления будут выполняться сразу на следующем кадре (Примечание: это кадр анимации браузера, отличающийся от концепции Vue nextTick).

Независимо от возможности перетаскивать элемент, если мы будем постепенно добавлять / исчезать новые / старые элементы, они будут жить вместе во время анимации, котораяне велик как видно из этого пера

В любом случае, чтобы исчезнуть, измените данные, затем добавьте новые, сохранив при этом высоту списка?

Примечаниечто без исчезновения проблема все еще очевидна: Ручка моей проблемы: нажмите кнопку переключения данных, чтобы увидеть проблему.

Answer 1

Оказывается, это довольно известная проблема .Прочитав эту ветку и играя в этом примере , я смог достичь чего-то по своему вкусу, используя:

list-leave-active {
 display: none;
}

Результирующее перо

Answer 2

Исправление css может заключаться в том, чтобы обернуть содержимое внутри блока некоторой высоты и скрыть переполнение.

Таким образом, даже когда сосуществуют новые элементы, можно избежать скачка в полосе прокрутки.