2

I'm using VueJs transition to make a component appVacancies slide.

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

It's Vue specific CSS for transition is

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

On created() life-cycle hook I'm just using setTimeout() to make showVacancies boolean to true.

I also have a fade animation with similar configuration but that is working.

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

I don't know what I'm doing wrong here. Please help.

Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
  • Could you show your javaScript please? It sounds like you need troubleshoot inside the appVacancies component and maybe add a placeholder variable to prevent showVacancies from being undefined – admcfajn Jul 18 '19 at 06:37
  • did you ever find the solution? – Joey Carlisle Feb 09 '23 at 21:40

0 Answers0