Css Transition does not work when is .myclass:not(.example) by clicking the button

I’d like to understand why some parameters work with transiton and some don’t. I have a button that brings up a div. If I only use max-height as a parameter then the transition works fine. When I insert other parameters such as opacity, top, etc… These only work on entry and never on closing. What am I doing wrong ?

You can see here that when you click the button for the first time, the transition works, when you click it the second time. the outbound transition does not work. The element disappear instantly.

var usermenu = document.querySelector(".user_menu_button");
function userMenu() {
  var x = document.getElementById("mts_menu");
   if (x.classList.toggle ("show")) {
    usermenu.innerHTML = '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Close</span>';
}  else {
   usermenu.innerHTML = '<i class="icn_button fa-solid fa-bars">Open</i>';
   }

}

/*Icon Button Toggle Menu*/
.user_menu_button {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #282c33!important;
    font-weight: 500!important;
    font-size: 13px!important;
}

.icn_button {
    margin: 0;
}

.icn_button:before, .icn_button:after {
    margin: 0;
    color: #fff;
}

.txt_button {
    margin-left: 10px;
    color: #fff;
}

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

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


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

.mts_dropdown_box {
    position: absolute;
    margin-top: 17px;
}

.padds {
  padding: 20px;
}

.mts_dropdown_content {
  background-color: #fff;
  min-width: 160px;
  width: 280px;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;
  position:relative;
}

.mts_dropdown_content.show {
   max-height: 100vh;
   opacity: 1;
   top: 0;
   transition: max-height 0.2s ease-in;
   transition: opacity 0.2s ease-in;
   transition: top 0.2s ease-in;
}

.mts_dropdown_content:not(.show) {
  max-height: 0;
  opacity: 0;
  top: -40px;
  transition: top 0.2s ease-out;
  transition: max-height 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<button onclick="userMenu()" class="user_menu_button">
     <i class="icn_button fa-solid fa-bars"></i>
     <span class="txt_button">Account</span>
</button>

<div class="mts_menu_container">
  <div class="mts_dropdown_box">
    <div id="mts_menu" class="mts_dropdown_content">
      <div class="padds">   
    
        <span> Content, Content, Content, Content, Content, Content, Content, Content, </span>
        <span> Content, Content, Content, Content, Content, Content, Content, Content, </span>
    
      </div>
    </div> 
  </div>
</div>

Answer

By setting multiple times “transition”, you’re overriding the previous one.

If you want multiple transitions, set it once with all your transitions separated with a comma:

transition: top 0.2s ease-out, max-height 0.2s ease-out, opacity 0.2s ease-out;

Or use “all”:

transition: all 0.2s ease-out;

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Advertisement

Answer