如何实现 Grid 中行的平滑折叠与展开动画-html教程-PHP中文网

如何实现 Grid 中行的平滑折叠与展开动画

本文介绍一种基于 CSS grid-template-rows 过渡的轻量级方案，实现网格中整行内容的同步隐藏/显示动画，避免子元素错位、分步消失等问题，确保视觉一致性与性能。

本文介绍一种基于 css `grid-template-rows` 过渡的轻量级方案，实现网格中整行内容的同步隐藏/显示动画，避免子元素错位、分步消失等问题，确保视觉一致性与性能。

在使用 CSS Grid 构建多行数据展示界面时，常需支持动态折叠/展开某一行（例如响应用户交互或状态变化）。理想效果是：整行作为一个视觉单元平滑缩放至高度为 0，且内部所有子项（图片、文本、SVG）同步参与过渡，无错位、无残留、无顶部/底部撕裂感。

原方案尝试通过 transform: translateY() + visibility 控制子项显隐，并配合 grid-template-rows: 0fr / 1fr 切换，但存在两个核心问题：

子项过渡不同步：.grid-item 的 transform 和 visibility 过渡时机与父行 grid-template-rows 不一致，导致“各行元素各自消失”，破坏整体性；
align-items: center 在 grid-template-rows: 0fr 下仍可能引发内容溢出（如基线对齐产生的额外空间），干扰高度归零。

✅ 正确解法：仅用 grid-template-rows 过渡，剥离子项动画逻辑

关键在于——让行容器自身控制高度变化，子项被动适应，而非主动干预。具体实现如下：

✅ 核心 CSS 原则

.grid-row {
  display: grid;
  grid-column: 1 / 4;          /* 跨越全部三列 */
  grid-template-columns: subgrid;
  grid-template-rows: 0fr;      /* 初始高度为 0 */
  background-color: lightgray;
  column-gap: 10px;
  transition: grid-template-rows 250ms ease-out; /* 单一、精准的行高过渡 */
  /* 移除 align-items: center —— 防止 0fr 下内容撑高 */
}

.grid > .visible {
  grid-template-rows: 1fr;      /* 展开时占满可用高度 */
}

/* 确保子项不溢出、不干扰高度计算 */
.grid-row > .grid-item {
  overflow: hidden;
  min-height: 0;               /* 允许高度压缩至 0 */
}

/* 统一对齐内联元素（img/svg）垂直居中 */
.grid-item > img,
.grid-item > svg {
  vertical-align: middle;
}

✅ JavaScript 控制逻辑（简洁可靠）

function toggleRow() {
  const i = d3.select('#row').property('value');
  const row = d3.select('.grid-row:nth-child(' + i + ')');
  row.classed('visible', !row.classed('visible'));
}

配合 HTML 中的 class="visible" 切换即可触发 CSS 过渡，无需操作 DOM 样式或监听尺寸。

⚠️ 注意事项与最佳实践

避免 align-items 干预：align-items: center 在 grid-template-rows: 0fr 时可能导致内容被强制居中而“上浮”出可视区域，造成视觉残留或布局抖动，应移除；
子项 min-height: 0 必不可少：默认 min-height: auto 会阻止子元素高度压缩，导致行无法真正收为 0；
慎用 visibility: hidden + transform 混合动画：它引入了额外的渲染层和时序复杂度，违背“行即单元”的设计初衷；
SVG 和图片对齐统一用 vertical-align: middle：比 align-self 更稳定，尤其在行高动态变化时；
过渡时长建议 200–300ms：过短显得突兀，过长降低响应感；ease-out 比 ease 更自然，收尾更柔和。