手风琴效果需避免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）来清理内联样式或释放资源。
以上就是JavaScript中如何实现手风琴效果_高度动画变化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541175.html
微信扫一扫 
支付宝扫一扫 
