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

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 ></i><span >Close</span>';
}  else {
   usermenu.innerHTML = '<i >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()" >
     <i ></i>
     <span >Account</span>
</button>

<div >
  <div >
    <div id="mts_menu" >
      <div >   
    
        <span> Content, Content, Content, Content, Content, Content, Content, Content, </span>
        <span> Content, Content, Content, Content, Content, Content, Content, Content, </span>
    
      </div>
    </div> 
  </div>
</div>

CodePudding user response：

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