使用 max-height 和 overflow: hidden 实现元素折叠展开动画，通过设置足够大的 max-height 并配合 transition 过渡效果，解决 height: auto 无法参与动画的问题，结合 JS 控制类切换触发平滑展开收起，适用于内容高度不确定的场景。
使用 CSS transition 实现元素的折叠展开效果时，如果直接对 height 使用过渡动画，会发现无法平滑播放，因为 height: auto 无法参与过渡。一个常见的解决方案是利用 max-height 配合 overflow: hidden 来实现视觉上的“展开/收起”动画效果。
原理说明
当元素的高度不确定（比如内容动态变化）时，不能直接设置 height 的过渡。但可以设置一个足够大的 max-height，让内容在展开时有足够的空间显示，再通过改变 max-height 的值来触发 transition 动画。
关键点：
- 初始状态：设置
max-height: 0，overflow: hidden实现隐藏 - 展开状态：设置较大的
max-height（如500px或更大），确保能容纳所有内容 - 配合
transition实现高度变化的过渡动画
CSS 示例代码
.collapsible {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.collapsible.expanded {
max-height: 500px; / 足够大以容纳内容 /
transition: max-height 0.3s ease-in;
}
HTML 结构示例：
立即学习“前端免费学习笔记（深入）”；
这里是可折叠的内容，可以有多行文本或其他元素。
JavaScript 控制展开/收起
function toggle() {
const el = document.getElementById('content');
el.classList.toggle('expanded');
}
点击按钮后，元素会在 max-height: 0 和 max-height: 500px 之间切换，产生折叠动画效果。
注意事项与优化建议
- max-height 值要合理：设得太小可能裁剪内容，太大可能导致动画时间过长或不自然
-
避免使用 height: auto + transition：浏览器无法计算从
0到auto的中间值 -
可结合 JS 获取实际高度：如果追求更精确的动画，可以在 JS 中动态获取内容高度并设置为
height过渡目标 - 注意性能：频繁重排可能影响性能，尽量避免在复杂布局中滥用
基本上就这些。用 max-height 模拟高度过渡是一种简单有效的方法，适合大多数折叠面板、下拉菜单等场景。虽然不是完美的“真实高度”动画，但在用户体验上已经足够流畅自然。
