How to add fade out animation to the clickable dropdown menu-CodePudding

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 >
  <div >
    <button onclick="myFunction()" >Click Me!</button>
    <div id="Demo" >
      <a href="#" >Link 1</a>
      <a href="#" >Link 2</a>
      <a href="#" >Link 3</a>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <button onclick="myFunction()" >Click Me!</button>
    <div id="Demo" >
      <a href="#" >Link 1</a>
      <a href="#" >Link 2</a>
      <a href="#" >Link 3</a>
    </div>
  </div>
</div>

May it help :)