max-height 是实现折叠面板过渡动画最可靠纯 CSS 方案，因其兼容性好、行为可控；需设合理值（如 200px）、配合 overflow: hidden 和 transition，并注意无障碍支持。
用 max-height 实现过渡动画最可靠
纯 CSS 实现折叠面板动画，max-height 是目前兼容性最好、行为最可控的方式。不能直接对 height 做 transition，因为 height: auto 无法被浏览器计算出过渡起点和终点；而 max-height 可以设为一个“明显大于内容实际高度”的固定值，让过渡有明确数值区间。
常见错误是把 max-height 设得太小（比如 max-height: 100px），导致内容被截断；或设得过大（如 1000px）造成动画时间过长。建议按面板常见内容估算——例如文字列表通常不超过 6 行，每行约 24px，留点余量设为 max-height: 200px 比较稳妥。
关键点：
-
overflow: hidden必须加在折叠容器上，否则内容会溢出 - 初始状态用
max-height: 0+opacity: 0（可选）增强收起感 - 展开时设
max-height: 200px，同时移除opacity或设为1 - 过渡写在容器本身，不要只写在
:hover或.active上，否则收起时没动画
用 details/summary 元素时如何加动画
原生 details 元素默认无展开动画，且 open 属性切换是即时的。想加动画，必须绕过其默认渲染逻辑：把 details 当作状态开关，用 JS 控制一个独立的 div 容器的 max-height，再用 details[open] 伪类触发样式变化。
立即学习“前端免费学习笔记（深入）”；
这样做的好处是保留语义化和无障碍支持（details 天然支持键盘操作和屏幕阅读器），又不牺牲动效。注意别直接对 details 设置 max-height —— 浏览器会忽略，因为它的渲染机制不走常规盒模型。
实操建议：
- 结构保持
<details><summary>...</summary><div class="panel">...</div></details> - CSS 中写
details[open] .panel { max-height: 300px; }，并提前定义好.panel的transition和初始max-height: 0 - 避免给
summary加display: block以外的布局改动，否则可能破坏点击区域
用 transform: scaleY() 替代高度动画的适用场景
当面板内容高度差异极大（比如从几行文字突然展开成含图片、表格的长区块），max-height 难以预设合理值，此时可用 transform: scaleY(0) → scaleY(1) 模拟折叠效果。它不改变文档流，性能更好（GPU 加速），但视觉上是“缩放”而非“拉伸”，和真实高度变化有感知差异。
这个方案适合内部组件库或设计语言明确接受缩放动效的项目。要注意两点：
-
transform不影响元素占位，所以收起后下方内容会上顶——需额外用margin-bottom或padding-bottom占位，或配合visibility: hidden控制可见性 -
scaleY(0)会让子元素内文本模糊（尤其 Chrome），建议加will-change: transform缓解 - 不能和
height、padding等属性混用过渡，否则动画会打架
JavaScript 控制时别漏掉 aria-expanded 和焦点管理
如果用 JS 切换面板状态（比如绑定按钮 click），光改 CSS 类不够。可访问性要求必须同步更新 aria-expanded 属性，并在展开后将焦点移到面板内容区首元素（如第一个 h3 或 input），否则键盘用户会迷失上下文。
容易被忽略的细节：
- 初始状态就要设好
aria-expanded="false"，不要等 JS 执行后再加 - 面板内容区需有
role="region"或aria-labelledby关联 summary 文本 - 收起时若焦点还在面板内，应手动
focus()回到触发按钮，否则焦点会跳到页面顶部 - 不要用
display: none隐藏内容——这会让屏幕阅读器完全忽略，要用visibility: hidden+height: 0+overflow: hidden组合
max-height 方案已经够用，但一旦开始调整过渡时长或加入多层嵌套，就很容易暴露预设值不合理的问题——这时候回过头检查内容高度分布，比调 CSS 更有效。 
