height: auto无法触发CSS过渡动画，因其非数值型属性，浏览器无法插值；应改用grid-template-rows配合fr单位实现可动画的高度伸缩。
为什么height: auto无法触发CSS过渡动画
CSS的transition只能作用于可计算、可插值的数值型属性，而height: auto不是具体数值，浏览器无法在“auto”和某个像素值之间做线性插值。常见错误是写transition: height 0.3s却对height: auto元素生效失败——它压根不会动。
用grid-template-rows + fr单位替代高度控制
Grid布局中fr单位本质是弹性分配剩余空间，只要容器高度可变（比如由内容撑开），改变grid-template-rows就能触发真实过渡。关键是：把原本靠height控制的伸缩区域，改用单行Grid轨道承载，并用minmax()或fit-content()配合fr实现“内容自适应 + 可动画”。
- ✅ 正确做法：
grid-template-rows: 0fr;→grid-template-rows: 1fr;，配合overflow: hidden和transition: grid-template-rows 0.3s ease - ⚠️ 注意：
1fr本身不是固定像素，但Grid引擎会将其映射为实际像素并插值，因此动画平滑 - ⚠️ 必须确保父容器有明确的
display: grid且子元素是直接Grid项；嵌套在Flex或Block里会失效 - 示例片段：
.accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .accordion-panel.is-open { grid-template-rows: 1fr; }
内容撑高不稳定？加minmax()兜底
纯1fr在内容极少时可能收缩过度，导致文字被截断；内容极多时又可能撑爆容器。用minmax(min-content, max-content)或minmax(0, max-content)能兼顾动画与容错。
-
grid-template-rows: minmax(0, max-content);→ 过渡到minmax(0, max-content)无效（无变化），需配合状态切换：从0fr→minmax(0, max-content) - 更稳妥写法：
grid-template-rows: 0fr;→grid-template-rows: minmax(0, max-content);，此时浏览器仍能插值（0fr ≈ 0px，minmax生成的实际高度≈内容高度） - 如果内容含图片或异步加载，务必等
img.onload或requestAnimationFrame后才切换class，否则max-content计算不准
兼容性与回退方案怎么处理
Firefox 63+、Chrome 66+、Safari 16.4+ 均支持grid-template-rows过渡，但旧版Safari（≤15.6）不支持。不能只靠JS检测UA，得用@supports实测。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
@supports (transition: grid-template-rows 0s) { .panel { transition: grid-template-rows 0.3s ease; } } @supports not (transition: grid-template-rows 0s) { .panel { transition: max-height 0.3s ease; } .panel.is-open { max-height: 500px; } /* 需预估上限 */ } -
max-height回退必须设具体数值，max-height: 100vh或none会导致动画失效 - 真正难搞的是同时要支持IE11——那就别用Grid动效，老实用JS +
scrollHeight+element.animate()
Grid过渡看着简洁，但fr单位的插值行为依赖渲染管线对Grid布局的实时重算，任何打断重排的操作（比如在动画中频繁读取offsetHeight）都会让效果卡顿或跳变。动手前先确认容器没有transform隔离或contain: layout干扰。
