直接transition height不行是因为height: auto无法被动画，浏览器无法计算中间帧；常用方案是用max-height模拟展开，或用transform scaley(0)实现更顺滑效果，表格中需避免直接对tr动画，应包裹在td内的div中处理。
为什么直接 transition height 不行
因为 height: auto 无法被 transition 动画，浏览器不知道“auto”对应的具体像素值，计算不出中间帧。你写 transition: height 0.3s 后，点击展开时要么卡住不动，要么直接跳变——这不是 bug，是 CSS 的限制。
用 max-height 模拟展开动画（最常用）
这是兼容性好、无需 JS、纯 CSS 可控的方案，核心是把 max-height 从 0 过渡到一个“足够大但不过量”的值。
- 取值不能太小（否则内容被截），也不能太大（否则动画时间拉长、有延迟感），常见设为
max-height: 500px或400px - 初始状态：设
max-height: 0+overflow: hidden，确保内容不可见且不占空间 - 展开状态：
max-height: 400px（必须是具体数值，不能是auto） - 注意：如果详情行含 padding/margin，需在
max-height中预留空间，否则动画末尾会“弹一下”
示例关键 CSS：
.detail-row {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out, opacity 0.2s ease;
}
.detail-row.expanded {
max-height: 400px;
opacity: 1;
}
用 transform scaleY(0) 实现更顺滑的展开
比 max-height 更轻量，GPU 加速友好，尤其适合固定高度或高度可预估的详情行。
- 必须配合
transform-origin: top，否则缩放中心偏移导致抖动 - 初始设
transform: scaleY(0)，展开时设transform: scaleY(1) - 注意：
scaleY(0)仍占文档流位置（不像display: none），所以需用overflow: hidden防内容溢出 - 如果详情行内有子元素设置了
vertical-align或line-height，可能影响缩放对齐，建议统一用flex或grid布局
示例关键 CSS：
.detail-row {
transform: scaleY(0);
transform-origin: top;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
overflow: hidden;
}
.detail-row.expanded {
transform: scaleY(1);
}
表格中必须避开的坑
表格行（<tr>）对 <code>transform 和 max-height 支持有限，某些浏览器（如旧版 Safari）会忽略这些属性作用于 <tr> 上。
<ul><li>安全做法：把详情内容包在 <code><td colspan="N"><div class="detail-wrapper">...</div></td> 里，对 <div> 做动画，而不是直接动 <code><tr>
<li>不要用 <code>display: none/block 切换，会破坏表格结构；也不要依赖 visibility: hidden/visible，它不触发重排，但无动画效果
table-layout: fixed，确保 <col> 宽度定义明确，否则 max-height 动画过程中列宽可能跳变真正难的不是写动画，而是让动画在 <tr> 里稳定跑起来——多数失败案例，问题不在 transition 写法，而在 DOM 结构没兜住语义约束。</tr>
