手风琴菜单设100%高度时CSS transition失效的解决方法求助

问题场景 #

用jQuery和CSS transition实现手风琴菜单，固定子菜单高度（如50px）时过渡效果正常，但改为height:100%适配动态内容后，CSS transition直接失效，子菜单出现延迟卡顿的问题。

实现代码 #

HTML

<div class="container">
  <ul class="nk-menu list-unstyled" id="side-menu">
    <li class="nk-menu-item has-sub">
      <a class="nk-menu-link nk-menu-toggle" href="javascript: void(0);">
        <span class="nk-menu-text">First</span>
      </a>
      <ul class="nk-menu-sub">
        <li class="nk-menu-item">
          <a class="nk-menu-link" href="">
            <span>Sub 1</span>
          </a>
        </li>
      </ul>
    </li>
    <li class="nk-menu-item has-sub">
      <a class="nk-menu-link nk-menu-toggle" href="javascript: void(0);">
        <span class="nk-menu-text">Second</span>
      </a>
    </li>
  </ul>
</div>

jQuery

$(document).on('click', '.nk-menu-toggle', function(e) {
  e.preventDefault();
  let $this = $(this);
  if ($this.parent().hasClass('active')) {
    $this.parent().removeClass('active');
  } else {
    $('.nk-menu').find('li').removeClass('active');
    $this.closest('li').toggleClass('active');
  }
});

原CSS（存在问题）

.nk-menu-sub {
  border-top: 1px solid #2a4163;
  background: #8FBC8F;
  padding: 0px 15px;
  margin: 0 0 7px 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .7s ease;
  -moz-transition: .7s ease;
  -o-transition: .7s ease;
  transition: .7s ease;
}

.active>.nk-menu-sub {
  height: 50px; /* 改为100%后过渡失效 */
  opacity: 1;
  padding: 15px;
}

解决方法：改用max-height替代height #

浏览器无法计算height:0到height:100%的具体数值差，导致过渡动画失效。改用max-height可以完美解决这个问题，设置一个足够大的max-height值覆盖子菜单可能的最大高度，既能适配动态内容，又能触发平滑过渡。

修改后的CSS #

.nk-menu-sub {
  border-top: 1px solid #2a4163;
  background: #8FBC8F;
  padding: 0px 15px;
  margin: 0 0 7px 0;
  max-height: 0; /* 替换原height:0 */
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  /* 明确指定过渡属性，确保所有样式变化都有动画 */
  -webkit-transition: max-height .7s ease, opacity .7s ease, padding .7s ease;
  -moz-transition: max-height .7s ease, opacity .7s ease, padding .7s ease;
  -o-transition: max-height .7s ease, opacity .7s ease, padding .7s ease;
  transition: max-height .7s ease, opacity .7s ease, padding .7s ease;
}

.active>.nk-menu-sub {
  max-height: 200px; /* 设置足够大的数值，可根据实际内容调整 */
  opacity: 1;
  padding: 15px;
}

原理说明 #

• max-height:0时，子菜单内容被完全隐藏；添加active类后，max-height变为预设的大值，浏览器能计算出0到该值的过渡区间，从而触发平滑动画。
• 明确列出过渡属性，保证padding、opacity这些样式变化也能同步过渡，避免出现视觉卡顿。

如果子菜单高度波动极大，也可以用JavaScript动态计算子菜单的实际高度再设置过渡，但CSS方法更简洁高效。

内容的提问来源于stack exchange，提问作者LarakBell