Vue.js过渡类不适用于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的布尔值。

我也有一个配置类似的 fade 动画，但是可以正常工作。

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

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