本文介绍一种基于 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更自然，收尾更柔和。
该方案轻量、可维护、兼容性好（现代浏览器均支持 subgrid 和 fr 单位过渡），真正实现了「整行作为一个原子单位平滑折叠」的目标，是 Grid 行级交互动画的推荐实践。
