max-height: auto 不合法导致动画失效，应改用 scrollHeight 动态设置目标高度；收起时需监听 transitionend 后重置，动态内容须延迟读取以确保 DOM 就绪。
为什么max-height: 0 → max-height: auto 会失效
根本原因不是写错了，而是
本身不合法 —— CSS 规范里
不接受
值，浏览器会直接忽略该声明，退回到无过渡状态。你看到的“没动画”，其实是样式没生效，DevTools 里能看到那条
被划掉。
用 JS 获取真实 scrollHeight 并注入内联样式
这是目前最稳妥、不依赖预估高度、且兼容所有现代浏览器的做法。核心是：在展开前读取内容真实高度，再设为
的目标值。
实操要点：
收起状态必须是
+
，不能用
展开前先强制重排（比如读
或调用
），否则
可能返回 0
设完
后立刻触发 class 切换（如
），让 transition 生效
收起时，先移除 class，等
事件后再把
设回
，否则下次展开会从 0 开始跳变
简短示例：
立即学习
“
前端免费学习笔记（深入）
”；
php版微信js-sdk支付接口类
php版微信js-sdk支付接口类
下载
scrollHeight 和 offsetHeight 的选择差异
两者都能读高度，但行为不同：
包含溢出但不可见的内容（比如有
时的完整内容高度），适合做展开目标值
是渲染后可见高度（含 border/padding），常用于收起后清理样式时的参考，但不能替代
做展开
如果元素有 padding/border，
不包含它们；若需精确匹配，得手动加回来：
容易被忽略的边界情况
动态内容（比如异步加载、Vue/React 渲染后）会让
读早了 —— 此时 DOM 还没更新，返回的是旧高度。解决办法只有两个：
监听数据变化后加
延迟一帧再读
对 React/Vue 组件，改用
的
或
生命周期钩子，在 DOM 确认就绪后再触发高度测量
另外，
事件只在
变化时触发，如果内容高度为 0（空节点），动画不会启动，需要单独判断并跳过 transition 流程。
max-height: automax-heightautomax-height: automax-heightmax-height: 0overflow: hiddendisplay: noneoffsetHeightgetBoundingClientRect()scrollHeightmax-height.is-opentransitionendmax-height0const el = document.querySelector('.collapsible');
el.addEventListener('click', () => {
if (el.classList.contains('is-open')) {
el.style.maxHeight = '0';
el.classList.remove('is-open');
el.addEventListener('transitionend', () => {
el.style.maxHeight = '';
}, { once: true });
} else {
el.style.maxHeight = el.scrollHeight + 'px';
el.classList.add('is-open');
}
});
scrollHeightoverflow: hiddenoffsetHeightscrollHeightscrollHeightel.scrollHeight + parseFloat(getComputedStyle(el).paddingTop) + parseFloat(getComputedStyle(el).paddingBottom)scrollHeightrequestAnimationFramerefupdateduseEffecttransitionendmax-height