Почему анимация перемещения VueJS работает только в одном направлении?

Question

Я совершенно озадачен этим. По какой-то причине Vue3 правильно применит класс анимации перемещения для <transition-group/>содержащий список элементов, но только если список продвинут вперед. Я собрал для этого CodePen, и даже с очень простым вариантом использования (перечисление чисел) классы перехода просто не применяются, если вы продвигаетесь в любом направлении, кроме обратного.

https://codepen.io/monitorjbl/pen/vYZPzXO

Если вы нажмете кнопку «-», классы анимации будут применены, и вы увидите, как срабатывают анимации движения. Однако при нажатии кнопки «+» классы анимации перемещения не применяются и анимация не применяется вообще.

Answer 1

Как я уже упоминал в ваших комментариях, вам не хватает классов перехода для входа и выхода. Поскольку вы изменяете только 3 элемента массива в любое время, это означает, что 2 элемента останутся в списке и будут соответствовать вашему классу «перемещения», но 3 элемента будут созданы / уничтожены, и вы не обрабатываете эти случаи.

Если вы обратитесь к примеру, приведенному в документации Vue , вы увидите, что классы перехода входа / выхода необходимы, чтобы собрать все воедино. Например, вы можете добавить это в свой CSS:

      .flip-list-enter-from,
.flip-list-leave-to {
  opacity: 0;
}

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

Вот пример проверки концепции: