max-height 是实现 HTML 折叠展开高度动画最实用、兼容性最好的 CSS 方案，但它不能用 auto 做终点值，必须设为具体像素数，否则过渡无效；需搭配 overflow: hidden 和显式 transition 属性，并通过 scrollHeight 动态获取高度以确保健壮性。
max-height 是实现 HTML 折叠展开高度动画最实用、兼容性最好的 CSS 方案，但它不能用 auto 做终点值 —— 必须设为一个具体像素数，否则过渡无效。
为什么不用 height: 0 → height: auto
CSS 的 transition 不支持 height: auto 动画，浏览器无法计算“从 0 到 auto”的中间帧。直接写 height: auto 会导致动画瞬间跳变，失去平滑效果。
常见错误现象：height 动画不触发、内容闪现、收起时残留空白或错位。
- 必须用
max-height替代height，因为max-height支持从0到具体数值（如500px）的过渡 -
max-height的终点值要大于内容实际高度（可设为content.scrollHeight + 20），否则动画中途截断 - 必须搭配
overflow: hidden，否则内容会溢出破坏折叠视觉
max-height 动画的关键 CSS 写法
基础样式需同时控制显隐、尺寸和过渡行为：
立即学习“前端免费学习笔记（深入）”；
.foldable {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
.foldable.show {
opacity: 1;
max-height: 500px; /* 注意：不是 auto */
}性能提示：transition: all 容易触发重绘甚至重排，显式声明 max-height 和 opacity 更安全可控。
-
opacity配合max-height能避免文字在收缩末尾模糊或抖动 - 若只用
max-height过渡，建议加will-change: max-height提升动画帧率（尤其在低端设备） - 不要给
.foldable设display: none—— 它会中断过渡，且无法监听transitionend
JavaScript 中如何动态获取真实高度
硬编码 500px 在内容长度变化时容易失效。更健壮的做法是运行时读取 scrollHeight：
关键点在于「强制重排」：设置 max-height 后立即读取 offsetHeight，让浏览器同步计算布局，再设 opacity: 1。
- 展开时顺序不能错：
max-height = scrollHeight + 'px'→void element.offsetHeight→opacity = '1' - 收起时可反向：
opacity = '0'→max-height = '0'（利用 transition 顺序自然衔接） - 注意：
scrollHeight包含 padding，但不含 margin；若内容有 border 或 margin，需额外加量或用getBoundingClientRect()
比 max-height 更稳的替代方案：transform: scaleY()
当内容高度差异极大（比如从几行到几十行），max-height 的固定上限值难预估，此时推荐用缩放动画：
它不依赖尺寸测量，纯靠 GPU 加速，动画更顺，且完全规避重排。
- 容器需设
transform-origin: top和overflow: hidden - 折叠态：
transform: scaleY(0)，展开态：transform: scaleY(1) - 配合
visibility: hidden控制焦点与可访问性（opacity: 0仍可聚焦） - 缺点：缩放会影响子元素内字体渲染清晰度，高 DPI 屏幕下可能轻微发虚
真正麻烦的从来不是「怎么动起来」，而是「动完之后状态是否干净」——比如收起后 max-height 没归零、focus 滞留在隐藏内容里、或者屏幕阅读器无法感知状态变更。这些细节往往在测试阶段才暴露，但修复成本远高于初始设计时多加两行判断。
