'Unexpected behavior in menu dropdown animation

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()" class="user_menu_button">Account</button>

<div class="w3-container">
  <div class="w3-dropdown-click">
      
   <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
       
    <div class="user_menu header">
        <span class="display name">Hello user</span>
        <span class="display mail">[email protected]</span>
    </div>   
      
     <hr class="solid">  
     
    <div class="user_menu item">
        <a href="/account">
         <i class="icn_menu fa-regular fa-user">1</i>
         <span class="link_text">Dashboard</span>
        </a>
    </div>
    
     <div class="user_menu item">
        <a href="ordini">
         <i class="icn_menu fa-regular fa-basket-shopping">2</i>
         <span class="link_text">My orders</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="libreria">
         <i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
         <span class="link_text">Downloads</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="impostazioni">
         <i class="icn_menu fa-regular fa-gear">4</i>
         <span class="link_text">Settings</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="wp-login.php?action=logout">
         <i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
         <span class="link_text">Logout</span>
        </a>
    </div>
   </div>
    
  </div>
</div>

Solution 1:^[1]

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()" class="user_menu_button">Account</button>

<div class="w3-container">
    <div class="w3-dropdown-click">

        <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">

            <div class="user_menu header">
                <span class="display name">Hello user</span>
                <span class="display mail">[email protected]</span>
            </div>

            <hr class="solid">

            <div class="user_menu item">
                <a href="/account">
                    <i class="icn_menu fa-regular fa-user">1</i>
                    <span class="link_text">Dashboard</span>
                </a>
            </div>

            <div class="user_menu item">
                <a href="ordini">
                    <i class="icn_menu fa-regular fa-basket-shopping">2</i>
                    <span class="link_text">My orders</span>
                </a>
            </div>

            <div class="user_menu item">
                <a href="libreria">
                    <i class="icn_menu fa-regular fa-cloud-arrow-down">3</i>
                    <span class="link_text">Downloads</span>
                </a>
            </div>

            <div class="user_menu item">
                <a href="impostazioni">
                    <i class="icn_menu fa-regular fa-gear">4</i>
                    <span class="link_text">Settings</span>
                </a>
            </div>

            <div class="user_menu item">
                <a href="wp-login.php?action=logout">
                    <i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i>
                    <span class="link_text">Logout</span>
                </a>
            </div>
        </div>

    </div>
</div>

Solution 2:^[2]

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
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Pete Pearl
Solution 2	Pete Pearl

'Unexpected behavior in menu dropdown animation

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]