Перечисление переходов в vuejs, изменение базового массива
Мне нужно иметь возможность анимировать перетаскивание в моем вертикальном списке. я использовал vuedraggableзавернул мой список в transition-group и все это работало сладко. Пока я не получу новые данные с сервера. Теперь из-за введения transition-group на долю секунды старые данные и новые данные живут вместе в DOM, вызывая расширение списка и подталкивая последующие div вниз и обратно. Это отчасти ожидается в соответствии с документами:
Операции DOM для вставки и / или удаления будут выполняться немедленно в следующем кадре (Примечание: это кадр анимации браузера, отличающийся от концепции Vue nextTick).
Независимо от возможности перетаскивать элемент, если мы будем постепенно увеличивать / уменьшать новые / старые элементы, они будут жить вместе во время анимации, что не так здорово, как видно из этого пера.
В любом случае, чтобы исчезнуть, изменить данные, а затем добавить новые, сохраняя при этом высоту списка?
Обратите внимание, что без исчезновения проблема все еще очевидна: перо моей проблемы: нажмите кнопку переключения данных, чтобы увидеть проблему.
2 ответа
Оказывается, это довольно известная проблема. Прочитав эту ветку и играя с этим примером, я смог достичь чего-то по своему вкусу, используя:
list-leave-active {
display: none;
}
Исправление css может заключаться в том, чтобы обернуть содержимое в поле некоторой высоты и скрыть переполнение.
Таким образом, даже когда сосуществуют новые элементы, прыжка на полосе прокрутки можно избежать.