Css 当 .myclass:not(.example) 通过单击按钮时，转换不起作用

Question

我想了解为什么有些参数适用于 transitionon 而有些则不然。我有一个调出 div 的按钮。如果我只使用 max-height 作为参数，那么过渡效果很好。当我插入其他参数（例如不透明度、顶部等）时...这些仅在进入时起作用，从不在关闭时起作用。我做错了什么？

你可以在这里看到，当你第一次点击按钮时，过渡起作用，当你第二次点击它时。出站转换不起作用。元素立即消失。

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 1

通过设置多次“过渡”，您将覆盖前一个。

如果您想要多个过渡，请设置一次，所有过渡用逗号分隔：

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

或使用“全部”：

transition: all 0.2s ease-out;

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Css 当 .myclass:not(.example) 通过单击按钮时，转换不起作用

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

html

javascript

css

transition