max-height: 0 → auto或none无法动画，因二者非数值不可插值；须用JS读scrollHeight设具体像素值，并按“设0→强制重排→赋真实高度”三步执行。
直接用 max-height 做展开收起过渡，90% 的情况会失效——不是代码写错了，是浏览器根本没法对 none 或 auto 插值动画。
为什么 max-height: 0 → max-height: none 没动画
CSS 过渡只接受可计算、可插值的数值型属性。none 和 auto 都不是数值，浏览器遇到就直接跳转，不走过渡流程。常见错误写法：
div { max-height: 0; transition: max-height 0.3s; }
div.expanded { max-height: none; }
这看起来合理，但展开时动画完全不会触发。
-
scrollHeight是唯一能准确反映内容真实高度的 DOM 属性；offsetHeight和clientHeight只返回当前渲染高度，不含溢出部分 - 哪怕你预估一个固定值（比如
max-height: 500px），只要内容实际高度超过它，末尾就会被裁掉 - 设得太小会截断，设得太大又导致收起时“塌缩过慢”，视觉上像卡顿
JS 动态设置 max-height 的关键三步
必须拆成「关闭过渡 → 强制重排 → 开启过渡并赋值」，否则浏览器会合并样式计算，跳过动画。典型顺序不能错：
立即学习“前端免费学习笔记（深入）”；
- 收起时：先设
max-height为当前scrollHeight，再立刻读取offsetHeight（强制重排），最后设max-height: 0 - 展开时：先设
max-height: 0，再读offsetHeight，再设max-height: el.scrollHeight + 'px' - 加
will-change: max-height能让长列表中动画更稳，尤其在移动端避免闪烁
示例函数：
function toggleExpand(el) {
const isExpanded = el.classList.contains('expanded');
if (isExpanded) {
el.style.maxHeight = el.scrollHeight + 'px';
el.offsetHeight; // 强制重排
el.style.maxHeight = '0';
} else {
el.style.maxHeight = '0';
el.offsetHeight;
el.style.maxHeight = el.scrollHeight + 'px';
}
el.classList.toggle('expanded');
}
max-height vs height：选哪个更稳妥
height 看起来更直接，但问题更多：
-
height受padding、border、line-height影响大，稍有响应式变化就容易失准 - 在
flex或grid容器里，height可能被父级min-height或align-items干扰，导致撑不开或压扁 -
max-height只设上限，允许“略高一点”，只要 ≥ 实际内容高度就不会出问题，容错性明显更好
另外，max-height 不影响内部文档流，文本换行、字体缩放等行为都保持原样；而 height 是硬约束，容易引发布局抖动。
纯 CSS 方案的适用边界在哪
如果不需要 JS 控制、也不关心“是否真超出指定行数才显示按钮”，可以用 checkboxhack 或 :checked + ~ 选择器实现纯 CSS 版本。但它有硬伤：
- 无法动态读取
scrollHeight，只能写死一个最大值（如max-height: 200px），内容一变就容易崩 - 按钮必须和文本在同一个父容器下，且依赖相邻兄弟选择器，在 Vue/React 的 slot 或 Fragment 场景里容易失效
- Firefox 对
height: auto过渡的支持不如 Chrome，有时会闪一下再展开
真正需要稳定、可预测、适配响应式内容的场景，JS 动态读取 scrollHeight 是绕不开的一步。别省这点逻辑，不然上线后修动画 bug 更费时间。
