Why do blocks move out during transition vue js?

Question

css

Good afternoon.
Here is my project: https://alexeyprojects.github.io/quizmaster/

When the forward button is pressed, everything works as it should, but when the back button is clicked, the block that should disappear ( leave ) first slides down, and then goes to the side, although the animation is the same:

.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;
  }

Tell me what is the problem please

Answer 1

.form-content {
  position: relative;
}

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

Answer 2

because the blocks are both visible and just fall like block ones.
I would wrap form-content in a div, set its styles to w70, ovh, h80, but form-content set display:flex, align-items: flex-start, flex-wrap: nowrap and width: 150% or whatever something like that.