用 max-height 配合 transition 实现展开收起动画，因 CSS 不支持 height: auto 过渡，需设足够大且可控的 max-height（如 500px 或 100vh）作为代理值，配合 overflow: hidden 和 class 切换完成平滑动画。
用 max-height 配合 transition 实现展开收起动画，是处理高度不确定内容的常用方案。关键在于：不能直接对 height: auto 做过渡（CSS 不支持），所以得用一个“足够大但可控”的 max-height 作为代理值。
为什么不用 height 过渡？
CSS 的 transition 无法作用于 height: auto，因为浏览器无法计算“auto”对应的数值起点和终点。即使设了 height: 0 → height: auto，动画也会失效或跳变。
max-height 的取值怎么定？
选一个明显大于内容实际高度的固定值（如 500px、100vh），确保所有可能内容都能被容纳。太小会截断，太大则收起时留白明显、动画变慢。
- 常见稳妥值：
max-height: 500px（适合多数文本块） - 更灵活：
max-height: 100vh（整屏高，防超长内容溢出） - 避免用
max-height: 10000px——虽“保险”，但收起动画会拖沓
基础实现结构
HTML 结构保持简洁：
立即学习“前端免费学习笔记（深入）”；
<div class="collapsible"> <button class="toggle">展开/收起</button> <div class="content">这里是动态内容，行数不定...</div> </div>
CSS 核心写法：
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.collapsible.active .content {
max-height: 500px; /* 展开态目标值 */
}JS 控制类名切换即可：
document.querySelector('.toggle').addEventListener('click', () =>
document.querySelector('.collapsible').classList.toggle('active')
);优化体验的小细节
让动画更自然，避免生硬感：
- 加
overflow: hidden防止内容撑出容器 - 过渡时间建议
0.2s–0.4s，过长显迟钝，过短难感知 - 用
ease-in-out比linear更符合视觉惯性 - 若内容含图片或字体加载后高度变化，可监听
load或用offsetHeight动态重设max-height（进阶需求）
