未知tbody最终高度时，如何实现其展开动画带动bounding-box高度变化？

我希望为table-body实现展开动画，尝试了以下代码：

@keyframes unfolding{
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
tbody{
  animation-duration: 2s;
  animation-name: unfolding;
}

<table>
  <thead>
    <tr><td>Start</td></tr>
  </thead>
  <tbody>
    <tr><td>unfolding td</td></tr>
  </tbody>
  <tfoot>
    <tr><td>End</td></tr>
  </tfoot>
</table>

遗憾的是，tbody的bounding-box高度并未产生动画效果。预期“End”元素一开始紧贴“Start”下方，并在2秒动画过程中逐渐下移。请问在不知道tbody最终高度的情况下，该如何实现这一效果？

并非《How can I transition height: 0; to height: auto; using CSS?》的重复提问 #

编辑补充：因为该问题既未提及bounding-box增长问题，其任何回答也未解决该问题。例如，首个回答提到的max-height对tbody无效，第二个回答使用的clip方法完全未考虑bounding-box增长，无法带动下方元素下移。

可行解决方案 #

方案1：JavaScript辅助实现原生table结构的高度过渡

原生table的tbody默认是display: table-row-group，导致max-height和直接过渡到height: auto都不生效，我们可以通过JS获取内容实际高度来实现动画：

tbody {
  overflow: hidden;
  transition: height 2s ease;
  height: 0;
  /* 保留原生table布局，避免样式错乱 */
  display: table-row-group;
}

const tbody = document.querySelector('tbody');
// 获取tbody内容的真实高度
const realHeight = tbody.scrollHeight;

// 先强制设置高度为0，确保初始状态正确
tbody.style.height = '0';
// 等待浏览器重排后再设置目标高度，保证动画触发
requestAnimationFrame(() => {
  tbody.style.height = `${realHeight}px`;
});

// 动画结束后设为auto，适配后续内容变化
tbody.addEventListener('transitionend', () => {
  tbody.style.height = 'auto';
});

这个方案保留了原生table的结构和样式，能让tfoot随tbody高度增加自然下移。

方案2：用CSS Grid模拟Table布局（纯CSS驱动，无需预知高度）

如果可以调整HTML结构，用Grid模拟table布局是更优雅的选择，完全不需要JS计算高度：

<div class="table-wrap">
  <div class="table-header">
    <div class="cell">Start</div>
  </div>
  <div class="table-body">
    <div class="cell">unfolding td</div>
  </div>
  <div class="table-footer">
    <div class="cell">End</div>
  </div>
</div>

.table-wrap {
  display: grid;
  /* 初始状态tbody高度为0 */
  grid-template-rows: auto 0fr auto;
  transition: grid-template-rows 2s ease;
  border-collapse: collapse;
}

/* 展开状态：tbody高度自适应内容 */
.table-wrap.expanded {
  grid-template-rows: auto 1fr auto;
}

.table-body {
  overflow: hidden;
}

/* 模拟原生table样式 */
.table-header, .table-body, .table-footer {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid #ddd;
  padding: 8px;
}

.table-header {
  font-weight: bold;
}

// 触发展开动画
document.querySelector('.table-wrap').classList.add('expanded');

Grid的fr单位会自动适配内容高度，过渡时容器整体高度动态变化，自然带动footer下移，完美满足未知高度下的需求。

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