如何实现折叠元素无延迟过渡且不占多余空间（替代max-height 0%）

针对动态生成表格的折叠需求，核心问题在于max-height的取值逻辑——固定大值会导致过渡时长不匹配实际内容，百分比依赖父元素高度易留空白。以下是两种可靠的解决方法：

方法一：JavaScript辅助动态计算高度（通用方案） #

通过获取元素实际内容高度，让max-height精准匹配内容，确保过渡时长完全对应折叠/展开的真实变化：

CSS 基础设置 #

.inv_fields, .doc_line {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease; /* 可根据需求调整过渡时长 */
}

JavaScript 逻辑（动态绑定事件） #

// 给折叠触发按钮绑定点击事件（根据实际HTML结构调整选择器）
document.querySelectorAll('.toggle-trigger').forEach(trigger => {
  trigger.addEventListener('click', () => {
    const target = trigger.closest('.doc_line').querySelector('.inv_fields');
    target.classList.toggle('expanded');

    if (target.classList.contains('expanded')) {
      // 先临时设置为auto获取真实高度，再赋值给max-height
      target.style.maxHeight = 'auto';
      const actualHeight = target.scrollHeight;
      target.style.maxHeight = `${actualHeight}px`;
    } else {
      target.style.maxHeight = '0';
    }
  });
});

• 优势：适配所有动态生成的内容，无论每行元素数量如何变化，都能精准匹配高度
• 注意：若后续内容动态更新（比如异步加载数据），需重新执行高度计算逻辑

方法二：纯CSS Grid布局技巧（适合结构化场景） #

如果.doc_line采用Grid布局，可以利用grid-template-rows的过渡特性，无需JS即可实现平滑折叠：

CSS 设置 #

.doc_line {
  display: grid;
  grid-template-rows: 0fr; /* 折叠状态：行高为0 */
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}

.doc_line.expanded {
  grid-template-rows: 1fr; /* 展开状态：行高自适应内容 */
}

/* 关键：确保内部内容能被Grid容器完全收缩 */
.doc_line > .inv_fields {
  min-height: 0;
}

• 优势：纯CSS实现，无JS依赖，过渡流畅无延迟
• 限制：要求目标元素是Grid容器，且内部结构能被Grid正确包裹

问题根源说明 #

• 固定max-height: 100rem：过渡时长是基于0到100rem的变化，但实际内容高度远小于该值，导致展开时大部分过渡时长是“无效动画”，看起来瞬间完成；收起时则要从100rem降到0，内容消失后仍有剩余动画时长，表现为延迟。
• 百分比单位：max-height的百分比是相对于父元素的高度，而动态表格行的父元素高度不确定，折叠时无法完全收缩，因此留下空白。

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