原生JS点击按钮控制div展开时CSS transition未生效及关闭延迟问题求助

嘿，你的思路方向是对的——用max-height实现内容展开/收起的过渡确实是替代height: auto（无法直接过渡）的常用方案，但问题出在你设置的目标值上，咱们一步步来解决：

为什么过渡不生效？ #

当你把max-height从150px切换到100%时，浏览器无法计算出这两个值之间的过渡中间帧。因为100%是相对父元素的高度，不是一个具体的像素值，浏览器没法确定过渡的“路径”，所以直接跳变了。

为什么关闭时有延迟？ #

如果强制让过渡生效（比如用很大的固定值），关闭时从超大固定值降到150px，动画时长是0.5秒，但你的内容实际高度可能远小于这个超大值。比如内容实际只有800px，那从2000px降到800px的这段时间，视觉上没有任何变化，只有从800px降到150px时才会有收缩效果，所以前面的“空转”时间就造成了延迟感。

解决方案 #

方案1：设置足够大的固定max-height（简单快速） #

估算一下你的内容最大可能的高度，设置一个比它大的固定像素值给.expanded类，这样浏览器能计算过渡动画：

.expanding-overflow.expanded {
  /* 替换100%为足够大的固定值，比如2000px，确保覆盖所有内容高度 */
  max-height: 2000px;
}

这个方法的缺点是如果内容高度变化很大，可能需要调整数值，但对于固定场景足够好用。

方案2：用JS动态计算实际内容高度（更精准） #

如果内容高度不确定，用JS获取内容的实际高度，动态设置max-height，这样能彻底解决延迟问题：

修改你的JS代码：

var exEl = document.querySelector('.expanding-overflow');
if(exEl){
  var btn = exEl.querySelector('.btn');
  // 获取内容容器的实际高度
  var contentEl = exEl.querySelector('div:last-child');
  var contentHeight = contentEl.offsetHeight;
  
  btn.addEventListener("click", toggle);
  function toggle() {
    if (exEl.classList.contains('expanded')) {
      exEl.style.maxHeight = '150px';
      setTimeout(() => {
        exEl.classList.remove('expanded');
        // 重置内联样式，避免影响后续样式
        exEl.style.maxHeight = '';
      }, 500); // 这里的时间要和transition时长一致
    } else {
      exEl.classList.add('expanded');
      exEl.style.maxHeight = contentHeight + 'px';
    }
  }
}

同时修改CSS，去掉.expanded的max-height设置（由JS动态控制）：

.expanding-overflow.expanded {
  /* 移除max-height: 100% */
}

这个方法能精准匹配内容高度，关闭时不会有延迟，因为是从实际高度降到150px。

额外优化建议 #

• 可以给.overlay也加上过渡效果，比如展开时设置opacity: 0并移除指针事件，让交互更流畅：

.expanding-overflow .overlay {
  /* 原有样式 */
  transition: opacity 0.3s ease;
}
.expanding-overflow.expanded .overlay {
  opacity: 0;
  pointer-events: none;
}

这样展开时遮罩会平滑消失，用户体验更好。

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