Классы перехода Vuejs не применяются к компоненту Vue - PullRequest
Новая
       18

Классы перехода Vuejs не применяются к компоненту Vue

1 голос
/ 27 мая 2019

Я использую 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;
  }

Я не знаю, что я делаю здесь неправильно.Пожалуйста, помогите.

...