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!
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?
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>
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.