手风琴效果需避免height: auto动画，主流方案有三：一用scrollheight+requestanimationframe精准控制；二用max-height过渡，简单但需预估高度；三用css变量配合height动画，兼顾可控性与维护性。
手风琴效果的核心是控制多个面板的展开与收起，只允许一个面板打开（或支持多选），同时用平滑的高度动画过渡。关键在于不能直接对 height: auto 做 CSS 动画——浏览器无法计算 `auto` 的终点值，所以得“绕道”：要么预先获取目标高度，要么用 `max-height` 模拟，或者借助 `scrollHeight` 动态计算。
方案一：用 scrollHeight + requestAnimationFrame（最准确）
适合内容高度不固定、需要精确动画的场景。原理是先设高度为 0，再读取元素真实内容高度（scrollHeight），然后逐帧更新 height。
- 点击标题时，先关闭其他已开面板（可选）
- 对目标面板：若当前闭合，获取其
scrollHeight，设style.height = '0'，强制重排 - 再设
style.height = scrollHeight + 'px'，触发过渡动画 - 若要收起，直接设
height = scrollHeight + 'px'→ 等一帧 → 设height = '0'
方案二：max-height 过渡（简单轻量，推荐初用）
不用 JS 计算高度，纯 CSS 控制，但需预估一个足够大的 max-height 值（如 500px 或 100vh），确保内容能完全显示。
- 初始状态：面板
max-height: 0; overflow: hidden; transition: max-height 0.3s ease - 展开时加类（如
.active），设max-height: 500px - 收起时移除类，自动缩回
- 缺点：如果内容超预估值，会被截断；动画时间固定，和实际高度无关
方案三：使用 CSS 自定义属性 + height 动画（现代写法）
结合 CSS 变量与 JS，让样式更可控。例如在 JS 中设置 element.style.setProperty('--target-height', h + 'px')，CSS 里用 height: var(--target-height) 并配 transition。
立即学习“Java免费学习笔记（深入）”；
- 需提前知道目标高度（仍靠
scrollHeight） - 比内联 style 更易维护，适合组件化开发
- 注意：首次渲染时变量未设，height 默认为 auto，需初始化为 0
基本上就这些。scrollHeight 方案最稳，max-height 最快上手。别忘了加 overflow: hidden 防文字溢出，也别忘了处理过渡结束事件（如 transitionend）来清理内联样式或释放资源。
