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

Question

Использование Vue. js и Переходы .

При удалении элемента из списка, я хотел бы, чтобы элемент исчезал, но оставайтесь на месте, как только оно исчезнет. Я также хотел бы, чтобы пункт под ним перешел на новую позицию. Я не смог найти способ заставить оба этих желаемых поведения иметь место.

.list-leave-active {
  position: absolute;
}

Этот CSS, кажется, необходим для перехода «следующего» элемента в его новое местоположение, но, по-видимому, также заставляет «уходящий» элемент переходить в верхнюю позицию, когда он покидает / исчезает.

Удаление этого CSS заставляет удаляемый элемент оставаться на месте по мере его исчезновения, но затем мы потеряйте красивый переход «следующего» элемента в списке.

JSFiddle сделает это намного понятнее ... https://jsfiddle.net/rprpx/vaq5nzL8/

Спасибо.

Answer 1

Посмотрите на список переходов в https://vuejs.org/v2/guide/transitions.html#List -Entering-Leaving-Transitions

По сути, вы можете просто использовать приведенный здесь пример и удалить часть transform: translateY(30px);.

Я создал эту скрипку с изменением выше, чтобы показать поведение:

https://jsfiddle.net/suterma/s5zLrfom/