Vue 3 Leave animation is not working. Transition issue

Question

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!

Answer 1

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?

"

Answer 2

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.

Answer 3

the animation is working,the problem is in your template

<template>
  <div id="app">
    <button @click="burgerIsOpened = !burgerIsOpened">Toggle</button>
    <transition name="openedBar">
      <div
        class="container--mobile"
        @click="burgerIsOpened = false"
        v-if="burgerIsOpened"
      >
        <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>
    </transition>
  </div>
</template>

<script>


export default {
  data: () => {
    return {
      burgerIsOpened: false,
    };
  },
  name: 'App',

};
</script>

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