Estoy tratando de obtener una serie de li para animar cuando se hace clic en un div. He intentado algunas cosas diferentes, pero no soy capaz de hacer que funcione. Por ejemplo, miré alternar .animate basado en un artículo de MDN pero esto no funcionó. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event
En StackOverflow, otro usuario tuvo este problema y un usuario sugirió usar controlAnimation()
El resultado debe ser repetible cada vez que se hace clic en el div.
document.getElementById("clickable").addEventListener("click", controlAnimation); function controlAnimation() { document.getElementById('menu-main-menu').style.animation="fadeInMenu"; } #menu-main-menu li { border-bottom: solid 1px #999; opacity: 0; -webkit-animation: fadeInMenu 0.5s 1; animation: fadeInMenu 0.5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #menu-main-menu li:nth-child(5n+1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } #menu-main-menu li:nth-child(5n+2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } #menu-main-menu li:nth-child(5n+3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } #menu-main-menu li:nth-child(5n+4) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } #menu-main-menu li:nth-child(5n+5) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } /* Animation steps */ @-webkit-keyframes fadeInMenu { 0% { opacity: 0.0; transform: translateY(16px); } 100% { opacity: 1.0; } } @keyframes fadeInMenu { 0% { opacity: 0.0; transform: translateY(16px); } 100% { opacity: 1.0; } <div id="clickable" >Click me</div> <br> <ul id="menu-main-menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>Tenga en cuenta que en su código, los elementos que tienen reglas css de "animación" son los elementos LI. Por lo tanto, cambiar la propiedad de animación del estilo de UL no funcionará.
Aquí cambié un poco su CSS para que pueda darle a la UL la clase de "animar" y los LI secundarios se animarán. Cuando presiona el botón, elimina esa clase y luego, al usar setTimeout, la vuelve a agregar, debería restablecerse y reproducir la animación.
document.getElementById("clickable").addEventListener("click", controlAnimation); function controlAnimation() { const menu = document.querySelector('#menu-main-menu'); menu.classList.remove('animate'); setTimeout(() => { menu.classList.add('animate'); }, 0); } #menu-main-menu li { border-bottom: solid 1px #999; } #menu-main-menu.animate li { opacity: 0; -webkit-animation: fadeInMenu 0.5s 1; animation: fadeInMenu 0.5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #menu-main-menu.animate li:nth-child(5n+1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } #menu-main-menu.animate li:nth-child(5n+2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } #menu-main-menu.animate li:nth-child(5n+3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } #menu-main-menu.animate li:nth-child(5n+4) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } #menu-main-menu.animate li:nth-child(5n+5) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } /* Animation steps */ @-webkit-keyframes fadeInMenu { 0% { opacity: 0.0; transform: translateY(16px); } 100% { opacity: 1.0; } } @keyframes fadeInMenu { 0% { opacity: 0.0; transform: translateY(16px); } 100% { opacity: 1.0; } <div id="clickable" >Click me</div> <br> <ul id="menu-main-menu" class='animate'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>intente agregar un tiempo de animación a su document.getElementById('menu-main-menu').style.animation="fadeInMenu"; así como: document.getElementById('menu-main-menu').style.animation="fadeInMenu 2s"; (cambie los 2s a su tiempo de animación)