本文介绍一种简洁可靠的方案，使用 grid-template-rows: 0fr / 1fr 配合 CSS 过渡，实现 Grid 行级内容的整体收起/展开动画，避免子元素错位、异步消失等问题。
本文介绍一种简洁可靠的方案，使用 grid-template-rows: 0fr / 1fr 配合 css 过渡，实现 grid 行级内容的整体收起/展开动画，避免子元素错位、异步消失等问题。
在构建动态数据表格或可折叠信息面板时，常需对网格（Grid）中的整行进行显示/隐藏控制。若采用 display: none 或 visibility: hidden，将导致过渡动画失效；而对每个子项单独做 transform 或 opacity 动画，则易引发视觉不同步——如图像、文字、SVG 消失速度不一致，或最后一帧从顶部“撕裂”式收缩。根本问题在于：动画目标应是容器高度本身，而非其内部元素的位移或可见性。
理想的解决方案是直接驱动网格行高变化。CSS Grid 提供了 fr 单位与 grid-template-rows 的过渡能力，配合 0fr（隐式零高度）与 1fr（自适应高度），可实现真正“整行一体”的折叠动画：
.grid-row {
display: grid;
grid-column: 1 / 4; /* 跨越全部三列 */
grid-template-columns: subgrid;
grid-template-rows: 0fr; /* 初始折叠状态 */
transition: grid-template-rows 250ms ease-out;
column-gap: 10px;
background-color: lightgray;
}
.grid > .visible {
grid-template-rows: 1fr; /* 展开状态 */
}
关键要点如下：
- ✅ 移除
align-items: center：该属性在grid-template-rows: 0fr时仍会尝试居中内容，导致子元素“溢出”隐藏区域，破坏折叠效果； - ✅ 为子项添加
overflow: hidden与min-height: 0：确保内容在行高为 0 时被严格裁剪，防止 SVG 或图片撑开容器； - ✅ 统一垂直对齐：对
<img>和<svg></svg>添加vertical-align: middle，解决内联替换元素默认基线对齐带来的额外间距（即原问题中的 4px 高度偏差）； - ✅ 避免嵌套过渡逻辑：无需为每个
.grid-item单独设置transform或visibility动画——这正是原方案产生异步感的根源。
JavaScript 控制层保持极简，仅切换类名即可触发 CSS 过渡：
function toggleRow() {
const i = d3.select('#row').property('value');
const row = d3.select('.grid-row:nth-child(' + i + ')');
row.classed('visible', !row.classed('visible'));
}
⚠️ 注意事项：
grid-template-rows的过渡仅在支持该属性的现代浏览器中生效（Chrome 107+、Firefox 110+、Safari 16.4+）；旧版 Safari 需加-webkit-grid-template-rows前缀（但不推荐为兼容性牺牲动画质量）；- 若行内存在
flex或grid子容器，需确保其min-height: 0，否则可能阻碍父级高度归零；- 不建议混用
height、max-height动画替代grid-template-rows，因其无法响应 Grid 自动尺寸计算，易导致布局错乱。
此方法以声明式 CSS 为核心，逻辑清晰、性能优异，且完全解耦 DOM 操作与样式表现，是构建专业级可折叠网格组件的推荐实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
