Tengo un problema con respecto a dejar la animación. Funciona al entrar correctamente. Componente principal:
<transition name="openedBar"> <nav-bar v-if="burgerIsOpened" @close="toggleBurger"></nav-bar> </transition>Componente de la barra de navegación:
<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>Estilos para el componente principal:
.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); } }No importa cuánto tiempo establezca para dejar la animación, de todos modos no funciona. Tan pronto como cierro el menú de hamburguesas, simplemente desaparece. Tal vez mis explicaciones son un poco extrañas, porque solo soy un novato, ¡así que gracias de antemano!
Si la memoria no me falla, v-if eliminará el elemento del DOM cuando sea falso y, dado que se eliminó, no puede animarse. ¿Tal vez puedas probar con v-show?
la animacion esta funcionando, el problema esta en tu plantilla
<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>Encontré una solución, en mi elemento secundario NavBar, tenía algunos comentarios, cuando los eliminé todo funciona bien. Tal vez funcione de esta manera solo a través de npm run serve. Por lo tanto, sin comentarios, buena animación.