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

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

CSS Grid 的 auto 行高本身不支持原生过渡动画，需结合 JavaScript 动态测量内容高度并触发 CSS height 过渡，从而实现视觉上平滑的自动缩放动画。

css grid 的 `auto` 行高本身不支持原生过渡动画，需结合 javascript 动态测量内容高度并触发 css `height` 过渡，从而实现视觉上平滑的自动缩放动画。

在 CSS Grid 布局中，当某一行（如 grid-template-rows: auto 1fr）依赖内容自动计算高度时，其尺寸变化是“即时”的——即使你为相关元素设置了 transition: height，浏览器也无法对 height: auto 进行动画，因为 auto 不是一个可插值的数值长度。

要实现平滑的动态高度动画，核心思路是：将 height 从 auto 临时覆盖为具体像素值，并利用 CSS 过渡完成动画。具体步骤如下：

✅ 正确做法：JS 驱动的高度快照 + CSS 过渡

首先，在 CSS 中为需要动画的网格项（如 #top）设置基础样式：

#grid {
  display: grid;
  height: 100vh; /* 推荐使用 vh 或明确高度，避免 100% 在无上下文时失效 */
  grid-template-rows: auto 1fr;
}

#top {
  overflow: hidden; /* 防止内容溢出干扰动画 */
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 推荐缓动函数，更自然 */
}

关键在于 JavaScript 的三步操作（常称“重排触发法”）：

CSS婚礼策划服务机构宣传网站模板

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

下载

写入新内容（此时 height 仍为 auto，高度突变但不可见）；
强制重排（reflow）：读取 offsetHeight，迫使浏览器计算当前实际高度；
设置固定 height 值，触发从旧高度到新高度的 CSS 过渡。

完整示例代码：

<div id="grid">
  <div id="top">Top content</div>
  <div id="bottom">Bottom content</div>
</div>

<script>
function updateTopContent(newHTML) {
  const topEl = document.getElementById('top');

  // 1. 更新内容
  topEl.innerHTML = newHTML;

  // 2. 强制重排：读取 offsetHeight 触发布局计算
  // 注意：必须在 DOM 更新后、设置 height 前立即读取
  const initialHeight = topEl.offsetHeight;

  // 3. 重置 height 为 0 → 触发从 initialHeight 到 0 的收缩（可选，增强反馈）
  topEl.style.height = '0';

  // 4. 再次强制重排，确保 height=0 生效
  topEl.offsetHeight; // dummy read

  // 5. 设置目标高度（自动计算后的精确像素值）
  topEl.style.height = topEl.scrollHeight + 'px';
}

// 示例：2秒后更新内容并动画
setTimeout(() => {
  updateTopContent('Updated content with <strong>more text and line breaks.');
}, 2000);
</script>

⚠️ 注意事项

避免 setTimeout 依赖：原答案中使用 setTimeout(..., 10) 是一种 hack，不如直接利用 offsetHeight 的同步重排语义可靠；
scrollHeight 更准确：相比 offsetHeight（含边框/内边距），scrollHeight 返回内容实际所需高度，更适合作为目标值；
响应式兼容性：若内容含图片或字体加载延迟，建议在 window.addEventListener('load', ...) 或使用 ResizeObserver 增强健壮性；
无障碍与性能：动画时长建议控制在 0.3–0.6s 之间；避免在高频事件（如 input）中频繁调用，可加节流。