I have a dropdown menu that opens on click. I've added a bottom fade animation to the menu when it opens. Now I'm trying to add a fade out animation when it closes. Since I'm new I don't know how to do it, can someone help me?
I appreciate any response, thanks.
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>please check the code which I added to yours :)
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>May it help :)