Tengo un menú desplegable que se abre al hacer clic. Agregué una animación de atenuación inferior al menú cuando se abre. Ahora estoy tratando de agregar una animación de desaparición gradual cuando se cierra. Como soy nuevo no se como hacerlo alguien me puede ayudar?
Agradezco cualquier respuesta, gracias.
function myFunction() { var x = document.getElementById("Demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } .w3-dropdown-content { display: none; background-color: red; min-width: 160px; overflow: hidden; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; position:relative; animation:animatebottom 0.6s } @keyframes animatebottom { from{bottom:-50px;opacity:0} to{bottom:0;opacity:1} } .w3-bar-block .w3-bar-item { width:100%; display:block; padding:8px 16px; text-align:left; border:none; white-space:normal; float:none; outline:0 } .w3-show-block,.w3-show { display:block!important } <div class="w3-container"> <div class="w3-dropdown-click"> <button onclick="myFunction()" class="w3-button w3-black">Click Me!</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div>por favor revisa el código que agregué al tuyo :)
function myFunction() { var x = document.getElementById("Demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className += " w3-hide"; setTimeout(function(){ x.className = x.className.replace(" w3-show", ""); x.className = x.className.replace(" w3-hide", ""); },500) } } .w3-dropdown-content { display: none; background-color: red; min-width: 160px; overflow: hidden; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; position:relative; animation:animateFromBottom 0.6s } @keyframes animateFromBottom { from{bottom:-50px;opacity:0} to{bottom:0;opacity:1} } @keyframes animateToBottom { from{bottom:0;opacity:1} to{bottom:-50px;opacity:0} } .w3-bar-block .w3-bar-item { width:100%; display:block; padding:8px 16px; text-align:left; border:none; white-space:normal; float:none; outline:0 } .w3-show-block,.w3-show { display:block!important } .w3-dropdown-content.w3-hide { animation:animateToBottom 0.6s } <div class="w3-container"> <div class="w3-dropdown-click"> <button onclick="myFunction()" class="w3-button w3-black">Click Me!</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div>Que ayude :)