如何为 CSS Grid 中自动调整高度的网格行添加平滑动画效果-html教程-PHP中文网

如何为 CSS Grid 中自动调整高度的网格行添加平滑动画效果

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 触发重排获取真实高度，再设为具体像素值启动过渡。

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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 操作因固定高度产生布局冲突。