Hola a todos
Quiero crear una animación para un menú desplegable usando css y javascript. Pero cuando la visualización está configurada en ninguno, las animaciones no funcionan, tal vez porque la propiedad de visualización no se puede animar. Pero si retraso la propiedad de visualización, le da a la animación suficiente tiempo para cargar. Entonces, ¿hay algún método posible para retrasar la misma propiedad de visualización a través de la función de devolución de llamada? Aquí está mi código:
function myfun() { let dis = document.getElementsByClassName("litems")[0]; if (dis.style.display == "none") { dis.style.display = "block"; dis.style.animation = "up 2s ease-in 1" } else { dis.style.animation = "down 2s ease-in 1"; setTimeout(() => { dis.style.display = "none"; }, 2000) } } .list ul { background: orchid; position: absolute; display: block; } @keyframes up { 0% { top: 0px; background: white; } 100% { top: 400px; background: orange; } } @keyframes down { 0% { top: 400px; background: orange; } 100% { top: 0px; background: white; } } <button onclick="myfun()">Click it to toggle</button> <div class="list"> <ul class="litems"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> </body>Muchísimas gracias.