[Vuejs]-Vue Js transition only works when entering, not leaving

0πŸ‘

βœ…

This seems to be working fine for me:

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

Give it a go πŸ™‚

Later edit (using top instead of transform):

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

And then remove the top: 0 from #fcst-details.

Leave a comment