Почему параграфы съезжают Vue-transition?

Question

[alaskafx]

При изменении window - параграфы начинают съезжать и только тогда исчезать.
Из-за чего это происходит и как это исправить?

Answer 1

[0xD34F]

<transition-group name='slide-components' mode="out-in"

Открываем документацию, читаем, что transition-group принимает

те же атрибуты, что и у <transition> кроме mode

Так что бессмысленно указывать mode, элементы всегда будут удаляться и добавляться одновременно. Ну а если элемента два, то одному из них придётся "съехать".

Вместо transition-group тут следует использовать transition:

<transition name="slide-components" mode="out-in">
  <p :key="window">{{ window }}</p>
</transition>