HTML本身不支持动画，手风琴平滑过渡必须用CSS的max-height+transition或JavaScript；因height: auto不可过渡，故max-height是最佳纯CSS方案，关键在设定合理临界值（如240px）并配合opacity和overflow: hidden实现流畅收展。
直接说结论：HTML 本身不支持动画，手风琴的平滑过渡必须靠 CSS 的 max-height + transition 或 JavaScript 控制 height，但后者兼容性和可维护性更差；用 max-height 是最稳妥的纯 CSS 方案，关键在于设对“足够大但不过量”的临界值。
为什么不能直接 transition height: 0 → auto
CSS 不允许对 auto 做过渡动画——浏览器无法计算中间帧。常见错误是写成：
details summary + * { transition: height 0.3s ease; }<br>details[open] summary + * { height: auto; }这样根本不会动。真正起效的是用 max-height 模拟高度变化，因为它是可过渡的数值属性。
max-height 过渡怎么设才不卡、不溢出
设太小会截断内容；设太大（比如 max-height: 1000px）会导致动画时间固定、收起时明显“拖尾”。推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 先估算内容最大可能高度（如 5 行文本 + 2 个
<p>+ 1 个<ul>≈ 200px），再乘以 1.2～1.5 倍留余 - 用具体像素值，别用
em或rem（字体缩放可能导致计算偏差） - 过渡属性只写
max-height和opacity，避免all引入意外重绘 - 关闭时加
overflow: hidden防止内容闪出
示例：
.accordion-panel {<br> max-height: 0;<br> opacity: 0;<br> overflow: hidden;<br> transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;<br>}<br>.accordion-panel.open {<br> max-height: 240px; /* 实测内容最高约 200px */<br> opacity: 1;<br>}JavaScript 控制开合时容易漏掉的点
纯 CSS 方案在需要动态内容或复杂交互时会力不从心，这时 JS 必须补位，但要注意：
- 切换前先强制读取一次
offsetHeight（触发重排），否则新max-height值可能被浏览器跳过 - 不要用
getComputedStyle(el).height取auto高度——它返回auto字符串，不是像素值 - 用
el.scrollHeight获取真实内容高度最可靠（含 padding，不含 border/margin） - 动画结束后记得清除内联
max-height，避免影响后续 CSS 覆盖
片段示意：
function togglePanel(panel) {<br> const isOpen = panel.classList.contains('open');<br> if (isOpen) {<br> panel.style.maxHeight = panel.scrollHeight + 'px';<br> // 强制重排<br> panel.offsetHeight;<br> panel.style.maxHeight = '0';<br> panel.classList.remove('open');<br> } else {<br> panel.style.maxHeight = panel.scrollHeight + 'px';<br> panel.classList.add('open');<br> }<br>}移动端 Safari 和旧版 Chrome 的兼容细节
部分 Safari 版本对 max-height 过渡有渲染延迟，尤其在快速连续开关时。解决方法：
- 给容器加
transform: translateZ(0)或will-change: max-height（慎用，可能引发内存问题） - 避免在
:active状态中立即触发开合，加 50ms 微延迟（setTimeout(..., 50)） - 如果内容含
iframe或视频，scrollHeight可能不准，需监听load后再计算
真正的难点不在写法，而在于「内容高度不可预知」和「浏览器渲染管线不可控」之间的拉扯——多测几个真实数据长度，比死磕某一行 CSS 更有效。
