如何实现 CSS Grid 中隐藏元素的平滑展开动画并消除行间隙-html教程-PHP中文网

如何实现 CSS Grid 中隐藏元素的平滑展开动画并消除行间隙

本文详解如何通过合理设置 grid-template-rows 过渡、统一网格容器样式及动态控制子元素渲染，实现隐藏内容的流畅展开动画，并彻底避免 row-gap 对不可见元素产生的无效占位问题。

本文详解如何通过合理设置 `grid-template-rows` 过渡、统一网格容器样式及动态控制子元素渲染，实现隐藏内容的流畅展开动画，并彻底避免 `row-gap` 对不可见元素产生的无效占位问题。

在基于 CSS Grid 的渐进式内容展开场景中，直接对 display: grid 容器使用 grid-template-rows: 0fr → 1fr 实现高度过渡是一种常见思路，但实践中常因样式作用域错位导致动画失效或布局异常。核心问题在于：过渡属性必须定义在始终生效的基类上，而非仅作用于临时状态类。

✅ 正确做法：将 display: grid 和 transition 提升至通用类

原代码中，.cards--hidden 定义了 display: grid 和 grid-template-rows: 0fr，而 .cards--active 未声明 display: grid，导致切换时容器回退为默认 display: block，grid-template-rows 失效，过渡自然中断。解决方案是将网格布局与过渡声明统一绑定到基础类 .cards：

.cards {
  display: grid;
  transition: grid-template-rows 300ms ease-in-out;
  /* 避免 row-gap 影响隐藏项：不在此处设 gap，改用 margin 控制可见项间距 */
}

随后，仅通过 grid-template-rows 控制显隐状态：

.cards--hidden {
  grid-template-rows: 0fr;
  overflow: hidden;
}

.cards--active {
  grid-template-rows: 1fr;
}

? 关键原理：0fr 表示该行轨道高度为 0（非 none），配合 overflow: hidden 可安全隐藏内容；1fr 则按剩余空间等比分配——二者均为可过渡的值，确保 CSS 引擎能插值计算中间状态。

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

下载

? 消除 row-gap 对隐藏元素的占位干扰

Grid 的 row-gap 会在所有行轨道间插入固定间距，即使某行内容被 grid-template-rows: 0fr 压缩为 0 高度，间隙仍会保留，造成视觉“空隙”。根本解法是：放弃全局 row-gap，改用 margin-bottom 精确控制可见子项间距。

例如，为 .items 元素添加底部外边距，同时在隐藏状态下重置其父容器 .wrapper 的内边距与边框，从源头移除冗余空间：

/* 仅对可见项应用间距 */
.visible .items,
.cards--active .items {
  margin-bottom: 10px; /* 替代 row-gap */
}

/* 隐藏状态下彻底清空 wrapper 内容区域 */
.cards--hidden .wrapper {
  padding: 0;
  border: none;
  height: 0;
}

这样，当 .cards--hidden 激活时，.wrapper 高度归零且无内边距，其内部 .items 的 margin-bottom 不再产生实际间距，完美规避 row-gap 的副作用。