Vue closing modal transition styling not triggered

Question

In a Vue component (which I register in a twig template in a Drupal 8 project) I have a

<transition appear name="fade">
My modal
</transition>

And the following CSS styling for when the modal is closing:

<style scoped>
@-webkit-keyframes fade-out-bottom {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
  }
  @keyframes fade-out-bottom {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
  }

  .fade-enter, .fade-leave-active {
    -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
    animation: fade-out-bottom 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
  }

</style>

When I open the modal the transition is working fine. But when I close the modal, my styling is not working?

Answer 1

I figured out. In my modal component, when I place <transition appear name="fade"> directly under <template> tag it works.