vue.js - Vuejs 转换类不适用于 Vue 组件

Question

我正在使用VueJs转换来制作组件appVacancies幻灯片。

<transition name="slide-down" mode="out-in" appear>
  <appVacancies v-if="showVacancies"></appVacancies>
</transition>

用于过渡的Vue 特定 CSS是

// Slide Down animation
.slide-down-active, .slide-down-leave-active {
  transition: all .5s ease-out;
}

.slide-down-enter, .slide-down-leave-to {
  opacity: 0;
  transform: translateY(20%);
}

在created()生命周期钩子上，我只是setTimeout()用来将showVacancies布尔值设为true.

我也有一个类似配置的淡入淡出动画，但这是有效的。

  <transition name="fade">
    <h1 v-if="!showMotion" class="display-2 grad-text mt-4">Welcome!</h1>
  </transition>

   // CSS
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s ease-out;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

我不知道我在这里做错了什么。请帮忙。