Vue Js переход работает только при входе, а не выходе

Question

Я пытаюсь применить переход снизу вверх, а сверху вниз vue js. Снизу вверх работает при входе, но в отпуске перехода нет.

Вот мой переход css:

.slide-details-mobile-enter-active {
    @include transition(all 0.5s ease-in);
}

.slide-details-mobile-enter-active {
    @include transition(all 0.5s cubic-bezier(0, 1, 0.5, 1));
}

.slide-details-mobile-enter-to, .slide-details-mobile-leave {
    transform: translateY(0vh);
}

.slide-details-mobile-enter, .slide-details-mobile-leave-to {
    transform: translateY(100vh);
}

Шаблон vue выглядит так:

    <transition :name="detailsTransition">
        <sc-fcst-details
            v-if="viewDetails"
            @changeactiveday="changeActiveFcstDay($event)">
        </sc-fcst-details>
    </transition>

Первый элемент в шаблоне vue имеет следующее css:

#fcst-details {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
  z-index: 4;
}

Есть предложения о том, почему переход на отпуск не работает?

Кроме того, я надеялся использовать верхний стиль вместо преобразования, но это совсем не сработало.

Answer 1

Кажется, у меня все работает нормально:

.details-transition-enter-active, .details-transition-leave-active {
  transform: translateY(0vh);
  transition: all 0.4s ease-in-out;
}

.details-transition-enter, .details-transition-leave-to {
  transform: translateY(100vh);
}

Дайте ему go ?

Позднее редактирование (с использованием top вместо преобразования):

.details-transition-enter-active, .details-transition-leave-active {
  top: 0vh;
  transition: all 0.4s ease-in-out;
}

.details-transition-enter, .details-transition-leave-to {
  top: 100vh;
}

А затем удалите top: 0 из #fcst-details.