手风琴效果需避免height: auto动画，主流方案有三：一用scrollHeight+requestAnimationFrame精准控制；二用max-height过渡，简单但需预估高度；三用CSS变量配合height动画，兼顾可控性与维护性。
手风琴效果的核心是控制多个面板的展开与收起，只允许一个面板打开（或支持多选），同时用平滑的高度动画过渡。关键在于不能直接对 height: auto 做 CSS 动画——浏览器无法计算 `auto` 的终点值，所以得“绕道”：要么预先获取目标高度，要么用 `max-height` 模拟，或者借助 `scrollHeight` 动态计算。
适合内容高度不固定、需要精确动画的场景。原理是先设高度为 0，再读取元素真实内容高度（scrollHeight），然后逐帧更新 height。
scrollHeight，设 style.height = '0'，强制重排style.height = scrollHeight + 'px'，触发过渡动画height = scrollHeight + 'px' → 等一帧 → 设 height = '0'
不用 JS 计算高度，纯 CSS 控制，但需预估一个足够大的 max-height 值（如 500px 或 100vh），确保内容能完全显示。
max-height: 0; overflow: hidden; transition: max-height 0.3s ease
.active），设 max-height: 500px
结合 CSS 变量与 JS，让样式更可控。例如在 JS 中设置 element.style.setProperty('--target-height', h + 'px')，CSS 里用 height: var(--target-height) 并配 transition。
立即学习“Java免费学习笔记（深入）”；
scrollHeight）基本上就这些。scrollHeight 方案最稳，max-height 最快上手。别忘了加 overflow: hidden 防文字溢出，也别忘了处理过渡结束事件（如 transitionend）来清理内联样式或释放资源。
以上就是JavaScript中如何实现手风琴效果_高度动画变化的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
382
