单击CSS max-height动画 -

Question

我之前使用过Max-height属性的CSS动画，但我从未注意到如果max-height属性非常大且转换时间很长，我在转换过程中会遇到奇怪的行为（特别是在转换出实际转换仅在按下按钮后开始一段时间

＆＃13;

＆＃13;

function toggleDetails() {
  var classList = document.getElementById("menu").classList.value;

  if (classList.indexOf("show") !== -1) {
    document.getElementById("menu").classList.remove("show");
  } else {
    document.getElementById("menu").classList.add("show");

  }
}

＆＃13;

#menu #list {
  max-height: 0;
  transition: max-height 15s ease-out;
  overflow: hidden;
  background: #d5d5d5;
}

#menu.show #list {
  max-height: 50000px;
  transition: max-height 15s ease-out;
}

＆＃13;

<div id="menu">
  <a>hover me</a>
  <ul id="list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>
<div class="openDetails" onclick="toggleDetails()">
  <a id="shoreMOre">Shore more</a>
</div>

＆＃13;

＆＃13;

＆＃13;

有没有办法正确地微调这个？我的主要问题是这一部分的内容变化很大。