height: auto无法参与transition，因其是关键字而非可插值数值，浏览器无法计算对应像素值，故transition: height 0.3s从0到auto会直接跳变；应改用max-height或grid-template-rows替代。
height: auto 无法参与 transition，因为浏览器根本不知道它等于多少像素
为什么 transition: height 0.3s 对 height: auto 完全无效
transition 只能在两个确定的、可计算的数值之间插值（比如 height: 0px → height: 240px）。height: auto 是一个关键字，不是数值，浏览器无法把它转成像素值，也就没法算出第 10 帧该是多少、第 20 帧又该是多少。结果就是：动画被跳过，元素“啪”一下直接显示全部内容。
常见错误现象包括：
- 点击展开按钮，内容瞬间出现，毫无过渡
- 收起时留白或截断，
overflow: hidden失效 - 控制台无报错，但动画就是不跑——纯属 CSS 逻辑不成立
用 grid-template-rows + 0fr/1fr 替代高度控制
Grid 的 fr 单位是真正的弹性单位，它参与布局计算，也能被 transition 插值。关键在于：0fr 不是 0px，而是「分配 0 份剩余空间」，它仍保留在文档流中；配合 overflow: hidden 才能视觉上完全隐藏。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 父容器必须设为
display: grid，且目标区域需是独立的一行（例如用grid-row或命名轨道） - 初始状态写
grid-template-rows: [header] auto [content] 0fr [footer] auto，把内容行压成0fr - 展开时改为
grid-template-rows: [header] auto [content] 1fr [footer] auto，1fr会按比例分配剩余空间 - 必须显式写
transition: grid-template-rows 0.3s ease，不能只靠all - 务必加
overflow: hidden到容器上，否则0fr行仍可能撑开并显示内容
max-height 和 grid-template-rows 怎么选
两者都能绕过 height: auto 的限制，但适用场景不同：
-
max-height更轻量，适合内容高度相对可控的组件（如折叠面板、表单提示），推荐设为500px～1000px；超过1000px可能导致动画卡顿或布局抖动 -
grid-template-rows真正响应内容变化，适合富文本、动态列表等高度不可预估的场景，但要求你改布局结构——已有复杂浮动或 inline 布局时很难介入 - IE 全系不支持
grid-template-rows过渡，必须 fallback 到max-height方案 - 如果父容器有
max-height限制（比如max-height: 200px），1fr仍会尝试撑满，此时需额外加overflow: hidden并允许内部滚动
容易被忽略的细节：0fr ≠ 隐藏，align-content 会偷偷撑高容器
0fr 只是不分空间，不代表 DOM 节点消失；若没配 overflow: hidden，子元素 padding/margin/inline 内容仍可能造成微小高度泄露。更隐蔽的问题是：align-content: stretch（Grid 默认值）会在行数少于定义时拉伸空行——比如你写了 grid-template-rows: repeat(6, 1fr)，但只放了 2 个子项，容器高度会变成预期的 3 倍。解决方法是显式设 align-content: start。
