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

试一试?

稍后编辑（使用顶部而不是变换）：

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

然后从#fcst-details 中删除top: 0。