Unexpected behavior in menu dropdown animation-CodePudding

I have a dropdown menu with a fade bottom animation. Everything works fine but there is a problem.

Expected behavior: When I click the button to open the menu, the dropdown content is displayed with a fade animation. It works!

The problem: The animation has a certain speed, 0.4s when I click to open and 0.4s when I click to close the menu. I wish this was the speed, however I am forced to stay at 0.6s when I click to close, because below that time the animation is broken causing the dropdown to behave strangely. That is, visualize it for a moment and then it disappears.

So recap: everything works fine with animation:animateToBottom 0.6s but doesn't work with animation:animateToBottom 0.4s

all this I applied to the class .w3-dropdown-content.w3-hide. You can see for yourself by running the code below, the behavior is not as it should be. But if you try to change from 0.4s to 0.6s or more then it works fine.

Sorry but I'm new, did I do something wrong? 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  = " w3-hide";
    setTimeout(function(){
    x.className = x.className.replace(" w3-show", "");
      x.className = x.className.replace(" w3-hide", "");
      
    },500)
  }
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
    font-size: 15px;
    font-weight: 500;
    color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0; 
    font-size: 13px;
    color: #75777D;
}

.user_menu.item:hover > a {
    color: #2E323A;
}

/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
    margin: 0px;
    padding: 0px;
    font-size: 16px
}

.icn_menu {
    margin-right: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

/* User Menu For header website */
.w3-container {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
}

.w3-dropdown-click {
    position: absolute;
    margin-top: 17px;
}

.w3-dropdown-content {
  display: none;
  padding: 20px;
  background-color: #fff;
  min-width: 160px;
  width: 280px;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  position:relative;
  animation:animateFromBottom 0.4s
}

@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-show-block,.w3-show {
    display:block!important;
}

.w3-dropdown-content.w3-hide {
  animation:animateToBottom 0.4s
}

.user_menu_button {
    width: 100%;
    background: #fbfbfb!important;
    font-weight: 500!important;
}

<button onclick="myFunction()" >Account</button>

<div >
  <div >
      
   <div id="Demo" >
       
    <div >
        <span >Hello user</span>
        <span >[email protected]</span>
    </div>   
      
     <hr >  
     
    <div >
        <a href="/account">
         <i >1</i>
         <span >Dashboard</span>
        </a>
    </div>
    
     <div >
        <a href="ordini">
         <i >2</i>
         <span >My orders</span>
        </a>
    </div>
    
    <div >
        <a href="libreria">
         <i >3</i>
         <span >Downloads</span>
        </a>
    </div>
    
    <div >
        <a href="impostazioni">
         <i >4</i>
         <span >Settings</span>
        </a>
    </div>
    
    <div >
        <a href="wp-login.php?action=logout">
         <i >5</i>
         <span >Logout</span>
        </a>
    </div>
   </div>
    
  </div>
</div>

CodePudding user response：

var x = document.getElementById("Demo");
function myFunction() {
    x.classList.toggle('w3-show')
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
    font-size: 15px;
    font-weight: 500;
    color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #75777D;
}

.user_menu.item:hover > a {
    color: #2E323A;
}

/*Icon Menu*/
.icn_menu:before, .icon_menu:after {
    margin: 0px;
    padding: 0px;
    font-size: 16px
}

.icn_menu {
    margin-right: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

/* User Menu For header website */
.w3-container {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
}

.w3-dropdown-click {
    position: absolute;
    margin-top: 17px;
}

.w3-dropdown-content {
    visibility: hidden;
    z-index: -10;
    padding: 20px;
    background-color: #fff;
    min-width: 160px;
    width: 280px;
    border-radius: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    position:relative;
    top: 30px;
    transition: top .4s, z-index .4s, visibility .4s, opacity .4s;
    opacity: 0;
}

.w3-show {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    top: 0;

}

.user_menu_button {
    width: 100%;
    background: #fbfbfb!important;
    font-weight: 500!important;
}

<button onclick="myFunction()" >Account</button>

<div >
    <div >

        <div id="Demo" >

            <div >
                <span >Hello user</span>
                <span >[email protected]</span>
            </div>

            <hr >

            <div >
                <a href="/account">
                    <i >1</i>
                    <span >Dashboard</span>
                </a>
            </div>

            <div >
                <a href="ordini">
                    <i >2</i>
                    <span >My orders</span>
                </a>
            </div>

            <div >
                <a href="libreria">
                    <i >3</i>
                    <span >Downloads</span>
                </a>
            </div>

            <div >
                <a href="impostazioni">
                    <i >4</i>
                    <span >Settings</span>
                </a>
            </div>

            <div >
                <a href="wp-login.php?action=logout">
                    <i >5</i>
                    <span >Logout</span>
                </a>
            </div>
        </div>

    </div>
</div>

CodePudding user response：

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", "");
      
    }, 400) // this duration must be like css duration
  }
}