css grid 的 auto 行高本身不支持原生过渡动画，需结合 javascript 动态测量内容高度并触发 css 过渡，实现顶部区域随内容变化的平滑伸缩效果。
css grid 的 auto 行高本身不支持原生过渡动画，需结合 javascript 动态测量内容高度并触发 css 过渡，实现顶部区域随内容变化的平滑伸缩效果。
在 CSS Grid 布局中，当某一行设置为 grid-template-rows: auto 1fr 时，其高度会根据子元素内容自动计算——但这种“自动”行为是即时重排（reflow）过程，无法直接通过 transition 对 grid-template-rows 或 height: auto 进行动画。这是因为 auto 不是一个可插值的数值，浏览器无法在两个 auto 状态间生成中间帧。
要实现视觉上的平滑缩放动画，核心策略是：将动态区域（如 #top）脱离 Grid 自动高度计算流，转而用显式 height 控制，并配合 overflow: hidden 和 CSS 过渡完成动画。具体步骤如下：
✅ 正确实现方式（推荐）
1. CSS 层：锁定过渡与溢出控制
#grid {
display: grid;
height: 100vh; /* 注意：使用 vh 或明确高度，避免父容器无高导致 auto 失效 */
grid-template-rows: auto 1fr;
}
#top {
overflow: hidden; /* 关键：隐藏溢出，使 height 截断内容 */
transition: height 0.4s cubic-bezier(0.34, 1.19, 0.69, 0.94); /* 推荐缓动曲线 */
}⚠️ 注意：height: auto 无法被过渡，因此必须先设为 height: auto 触发重排获取真实高度，再设为具体像素值启动过渡。
立即学习“前端免费学习笔记（深入）”；
2. JavaScript 层：精确测量 + 动画触发
function updateTopContent(newHTML) {
const topEl = document.getElementById('top');
// 1. 先更新内容（此时 height 为 auto，DOM 重排发生）
topEl.innerHTML = newHTML;
// 2. 强制重排：读取 offsetHeight，确保 DOM 更新完成
void topEl.offsetHeight; // 强制 layout flush
// 3. 设置目标高度（当前内容撑开的实际高度）
const targetHeight = topEl.scrollHeight + 'px';
topEl.style.height = targetHeight;
// 4. （可选）动画结束后重置为 auto，保持语义化与响应性
setTimeout(() => {
topEl.style.height = 'auto';
}, 400); // 与 transition 时长一致
}
// 示例调用
setTimeout(() => updateTopContent('<h3>New Title</h3><p>Expanded content with more text...</p>'), 2000);? 关键原理说明
- void el.offsetHeight 是关键一步：它强制浏览器同步计算当前布局（layout flush），确保后续 scrollHeight 获取的是更新后的真实高度；
- scrollHeight 比 offsetHeight 更可靠，因为它包含所有内容高度（即使被 overflow: hidden 截断）；
- 动画结束后恢复 height: auto，既保留 Grid 的自适应能力，又避免后续 JS 操作因固定高度产生布局冲突。
? 常见误区规避
- ❌ 不要对 grid-template-rows 直接做 transition（无效）；
- ❌ 避免在 requestAnimationFrame 外部异步读取高度（可能读到旧值）；
- ❌ 不要用 setTimeout(..., 0) 替代 void offsetHeight —— 它无法保证 layout 已完成。
通过这套组合方案，你能在保持 Grid 布局结构优势的同时，为内容驱动的高度变化赋予自然、可控的动画体验——兼顾语义、性能与用户体验。
