Vue 3 Leave animation is not working. Transition issue-CodePudding

I have an issue regarding leaving animation. It works on enter correctly. Parent component:

    <transition name="openedBar">
      <nav-bar v-if="burgerIsOpened" @close="toggleBurger"></nav-bar>
    </transition>

NavBar component:

<template>
<div class="container--mobile" @click="tryClose">
  <nav>
    <ul>
      <li>
        <router-link to="/auth">Войти в личный кабинет</router-link>
      </li>
      <li>
        <router-link to="/cart">Корзина</router-link>
      </li>
      <li>
        <router-link to="/catalogue">Каталог</router-link>
      </li>
      <li>
        <router-link to="/cactus">Доставка</router-link>
      </li>
      <li>
        <router-link to="/cactus">Программа скидок</router-link>
      </li>
      <li>
        <router-link to="/cactus">О нас</router-link>
      </li>
    </ul>
  </nav>
</div>

Styles for parent component:

.openedBar-enter-active {
  // transition: all 1.1s ease;
  animation: modal 1.1s ease-out;
}
.openedBar-leave-active {
  animation: modal 1.1s ease-in reverse;
}

@keyframes modal {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

It doesn't matter how much time I'll set for leaving animation, it doesn't work anyway. As soon as I close the burger-menu, it just disappears. Maybe my explanations are a bit strange, cause I'm just a newbee, so thank you in advance!

CodePudding user response：

If memory serves me right, v-if will remove the element from the DOM when false and since it is removed it cannot animate. Maybe you can try with v-show?

CodePudding user response：

I found a solution, in my child element NavBar, I had some comments, when I deleted them everything works fine. Maybe it works this way just via npm run serve. Therefore - no comments - nice animation.