CSS如何制作点击展开时的手风琴动画_平滑过渡max-height高度

max-height 从 0 到 none 无法过渡，因 none 非可动画数值，导致跳变；应改用足够大的具体像素值或 JS 动态测量真实高度并设置，收起后再置为 none，配合强制重排和 will-change 提升性能。为什么直接 transition max-height 不生效因为 max-height 从 0 到 none 无法过渡------浏览器不识别 none 为可动画的长度值，会跳变。常见表现是：点击后内容瞬间弹出/消失，没有平滑效果。别写 max-height: none 做终点，它不是数值，transition 失效用具体像素值（如 max-height: 500px）代替 none，但得预估足够高的上限如果内容高度变化大（比如含图片或动态文本），500px 可能不够，导致裁剪；太大会让动画变慢（即使内容短，也要拉满到那个值）如何用 JS 配合 CSS 实现真正自适应的展开动画核心思路：先关闭 transition，用 JS 测出真实高度，再打开 transition 并设为该高度，动画结束后再设回 max-height: none（仅用于后续无高度限制的布局）。展开前：element.style.maxHeight = '0' + element.style.overflow = 'hidden'强制重排（触发 layout）：element.offsetHeight（空读取即可）设目标高度：element.style.maxHeight = element.scrollHeight + 'px'收起时反向操作，最后动画结束再设 maxHeight = '0' 和 overflow = 'visible'注意：不要监听 transitionend 后立刻清除 max-height，否则下一次展开又得重新测高，影响性能纯 CSS 方案的取舍：用 padding + opacity 模拟手风琴当内容结构固定、高度差异不大时，可绕开 max-height 动画，改用更稳定的组合： Vozo Vozo是一款强大的AI视频编辑工具，可以帮助用户轻松重写、配音和编辑视频。