纯css3手风琴动画关键在max-height设具体值（如500px）替代height:auto，并通过offsetheight强制重排触发动画；details需用opacity+transform替代max-height，且overflow:hidden须正确作用于动画元素。
纯 CSS3 实现手风琴面板平滑收缩过渡，关键不在“能不能”，而在「max-height 值怎么设」和「transition 怎么触发」——用 height: auto 直接过渡会失效，用 display: none 会跳过动画，这两个是踩坑最频繁的点。
为什么不能用 height: auto 做 transition？
CSS 动画引擎无法对 auto 值做插值计算，浏览器看到的是“从 0 到 auto”，中间没有可过渡的数值序列，结果就是瞬间展开/收起，或者干脆不动画。
- 必须用
max-height替代height，因为它是可动画的数值属性 -
max-height必须设为一个「大于内容实际高度」的具体值（如max-height: 500px），不能是none或auto - 如果内容高度差异大（比如一段文字 vs 三张图片），预设值宁大勿小；太大只会让收起末尾略慢一点，比卡顿或截断强得多
如何让点击后真正触发动画而不是闪现？
单纯切换 class（比如加 .is-open）在 DOM 刚插入、或初始 display: none 时，浏览器可能来不及捕捉“前状态”，导致过渡被跳过。
- 展开前：先设
max-height: 0，再强制重排（panel.offsetHeight），再加.is-open类 - 收起时：可直接移除类，但更稳的做法是先读取当前
getComputedStyle(panel).height，设为max-height，再设回0 - 不要在 JS 中写
panel.style.height = 'auto'—— 这会覆盖 transition，且auto无法参与动画
details + summary 的 CSS 动画怎么写才不卡？
原生 <details></details> 不支持 height 过渡，强行用 max-height 易因预估不准而抽搐；推荐改用 opacity + transform 组合动画，更可靠。
- 只对
details[open] > *:not(summary)应用动画，避免影响 summary - 用
@keyframes slideDown配合transform: translateY()和opacity，比纯高度过渡容错率高 - 若坚持用
max-height，必须确保details[open]下的内容容器有明确max-height（如max-height: 400px），且该值 ≥ 所有可能内容高度 - 注意
details在 IE 中完全不支持，需降级方案时再引入 JS
最易被忽略的其实是 overflow 控制 —— overflow: hidden 必须始终作用于动画元素本身，且不能被父级 overflow: hidden 截断，否则动画过程中内容会被意外裁切。这点在嵌套 flex 或 grid 容器里特别容易出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
