子元素展开折叠不自然是因height无法过渡auto值，改用max-height配合overflow:hidden和transition可实现平滑动画，通过设置合理max-height值（如500px）避免跳变，再结合opacity或transform增强视觉效果，必要时用JS动态计算高度以精确控制，此方案兼顾兼容性与流畅性。
子元素的展开折叠动画不自然，通常是因为直接对 height 使用 transition 时，无法自动适配内容高度变化。而使用 max-height 搭配 transition 是一种常见且有效的优化方案，能让动画更平滑自然。
问题原因：height 不支持 auto 过渡
当设置 height: auto 到具体数值（或反之）时，CSS 无法计算中间过渡状态，导致 transition 失效或直接跳变。即使写成 height: 0 → height: 200px，也需要预知准确高度，维护成本高。
解决方案：用 max-height 实现动态过渡
利用 max-height 的特性，设置一个足够大但合理的上限值，使内容能完全展开，同时保持 transition 效果。
- 初始状态：max-height 设为 0，配合 overflow: hidden 隐藏内容
- 展开状态：max-height 设为足够大的值（如 500px 或 1000px），确保容纳所有内容
- 添加 transition: max-height 0.3s ease
示例代码：
立即学习“前端免费学习笔记（深入）”；
.expander {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
<p>.expander.open {
max-height: 500px; /<em> 足够覆盖多数情况 </em>/
}</p>进一步优化体验
虽然 max-height 方案简单有效，但仍可微调提升自然感：
- 避免过大 max-height：设为 9999px 会导致动画时间过长。应根据实际内容设定合理值，比如 400px～600px
- 配合 opacity 或 transform：在展开时同步淡入（opacity）或轻微缩放（transform: scaleY），增强视觉连贯性
- JS 动态计算高度：若需精确控制，可用 JavaScript 先设置 height: auto，读取 offsetHeight 后再改为具体数值并触发 transition
基本上就这些。用 max-height 替代 height 做展开收起，是平衡兼容性与效果的最佳实践之一，不复杂但容易忽略细节。
