Quiero que mi cajón se anime al entrar, al salir y cuando termine la animación, cambie a display: none pero cuando se cierra el cajón, desaparece y no se anima.
const Drawer = ({ closeDrawer, isDrawerOpen }) => { const [isAnimating, setIsAnimating] = useState() let drawerClassName if (isDrawerOpen) { drawerClassName = "drawer-in" } else if (!isDrawerOpen && isAnimating) { drawerClassName = "drawer-animating" } else if (!isDrawerOpen && !isAnimating) { drawerClassName = "drawer-out" } return ( <> <div className={`drawer ${drawerClassName}`} onAnimationStart={() => setIsAnimating(true)} onAnimationEnd={() => setIsAnimating(false)} ></div> <div onClick={closeDrawer}></div> </> ) }CSS:
.drawer { height: 100%; width: 60%; background-color: #fff; position: absolute; right: 0; top: 0; opacity: 1; z-index: 3; transform: translateX(100%); } .drawer-in { animation: 0.7s drawerIn; transform: translateX(0); display: block; } .drawer-animating { animation: 0.7s drawerOut; display: block; } .drawer-out { animation: 0.7s drawerOut; display: none; } @keyframes drawerIn { 0% { transform: translateX(100%); } 1% { transform: translateX(100%); } 100% { transform: translateX(0); } } @keyframes drawerOut { 0% { transform: translateX(0); } 99% { transform: translateX(100%); } 100% { transform: translateX(100%); } }es porque cuando establece la clase de drawer-out en la display: none; se activa inmediatamente y no ves la animación.
Una solución es ejecutar una función setTimeout dentro de su JavaScript para esperar a que termine la animación, luego cambiar la propiedad de visualización de elementos a none . Esto permitirá que su 'animación de cierre' se complete antes de eliminar el elemento. Vea mi fragmento a continuación para ver un ejemplo de trabajo.
Básicamente, lo que sucede en mi fragmento de ejemplo es que estoy activando la animación de cierre al agregar una clase asociada con la animación. Luego estoy configurando una función de tiempo de espera que espera a que se complete la animación (configure el tiempo de espera en milisegundos para que coincida con el tiempo de animación dentro de su CSS). Una vez que se completa el tiempo de espera, la clase de animación se elimina y el atributo de datos del elemento se establece en closed , lo que activará la visualización de ninguno. Espero que esto ayude.
const menu = document.querySelector('.menu'); const menuToggle = document.querySelector('.menu_toggle'); menuToggle.checked=false menuToggle.addEventListener('change',(e)=>{ menuToggle.disabled=true let menuState = menu.dataset.menuState if(menuState==='closed'){ menu.dataset.menuState='opened' setTimeout(() => { menuToggle.disabled=false }, 500); }else{ menu.classList.add('animate_close') setTimeout(() => { menu.classList.remove('animate_close') menu.dataset.menuState='closed' menuToggle.disabled=false }, 500); } }) body { background-color: rgb(235, 235, 235); } .menu { background-color: black; color: white; width: fit-content; } .menu { transition: all .5s ease-in-out; } .menu[data-menu-state="closed"] { background-color: red; display: none; } .menu[data-menu-state="opened"] { animation: openMenu .5s ease-in-out; transform: translateX(100%); background-color: green; } .menu.animate_close{ background-color: rgb(0, 30, 128); animation: closeMenu .5s ease-in-out; opacity: 0; } @keyframes openMenu { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @keyframes closeMenu { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } <body> <label for="menu_toggle">Menu Toggle</label> <input id="menu_toggle" type="checkbox" class="menu_toggle"> <div class="menu_container"> <div class="menu" data-menu-state="closed"> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ul> </div> </div> <script src="main.js"></script> </body>