Почему съезжают блоки при transition vue js?

Question

[Алексей]

Добрый день.
Вот мой проект : https://alexeyprojects.github.io/quizmaster/

При кнопке вперед все происходит как надо, но при клике на кнопку назад, блок который должен изчезать ( leave ) сначала съезжает вниз, а потом уже уходит в бок, хотя анимация применяется одна и та-же:

.slide-fade-enter-active {
    transition: all .3s ease cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter-to {
    transform: translateX(-150%);
    opacity: 0;
  }
  .slide-fade-leave-to
  /* .slide-fade-leave-active до версии 2.1.8 */ {
    transform: translateX(150%);
    opacity: 0;
  }

Подскажите в чем проблема пожалуйста

Answer 1

[Юрий]

.form-content {
  position: relative;
}

.slide-fade-leave-active {
  position: absolute;
  top: 0;
}

Comments

[Юрий]

Есть ещё вариант с mode="out-in" для транзишена, но там скорее всего придётся переделывать как минимум длительность переходов.

Answer 2

[sinneren]

потому что блоки одновременно видны и просто падают тк блочные.
я бы обернуть form-content в дивку, задал ей его стили, w70, ovh, h80, а вот form-content задал display:flex, align-items: flex-start, flex-wrap: nowrap и width: 150% или что-то такое.