17370845950

不能直接用 transition: height 实现面板展开动画，因为 height: auto 无法参与过渡；应使用 max-height 过渡或 JS 动态设置精确高度。

直接用 transition: height 实现面板展开动画，却出现“布局突然挤压”——这通常是因为 height 从 0 变到 auto 时，CSS 无法过渡 auto 值，浏览器会跳过动画，瞬间完成渲染，造成视觉上的“挤压感”或“闪跳”。

问题根源：height: auto 无法参与 transition

CSS 的 transition 只支持可计算的数值（如 100px、2rem），而 height: auto 是一个不可动画的关键词。当你写：

浏览器会把 height: auto 当作“无明确数值”，直接跳到最终高度，transition 失效。

解决方案一：用 max-height 过渡（最常用）

不直接动 height，改用 max-height 模拟——只要设一个足够大的值（大于内容实际高度），就能触发平滑过渡：

• 初始状态：max-height: 0; overflow: hidden;
• 展开状态：max-height: 500px;（选一个比内容最大可能高度稍大的值，比如 500px / 100vh）
• 加上 transition: max-height 0.3s ease-in-out;

✅ 优点：纯 CSS、无需 JS、兼容性好
⚠️ 注意：如果内容高度远超设定的 max-height，会展开不全；太大会导致动画变慢（

解决方案二：JS 动态获取并设置精确 height

在展开前，用 JS 测量内容真实高度，再设置为 height：

• 点击展开时，先加类（如 .is-expanding），此时 height: auto 但 overflow: hidden 仍生效 → 浏览器强制渲染出自然高度
• 用 offsetHeight 读取真实高度
• 立刻设 height: [实测值] + "px"，再加 .is-open 类触发 transition
• 收起时，先移除 .is-open → height 回到 0（有动画），过渡结束后再清空内联 height 并设回 height: auto（用于后续再次测量）

✅ 优点：动画精准、高度完全匹配内容
⚠️ 注意：需处理异步渲染（如图片加载后高度变化）、避免重复绑定、收起后清理样式。

更现代的选择：使用 @starting-style + height: auto（实验性）

CSS 新增的 @starting-style 规则（配合 height: auto）允许在动画起始帧“假装”有 height 值，但目前仅 Chromium 117+ 支持，且需开启 flag，生产环境慎用：

现阶段不推荐作为主力方案，可关注后续浏览器支持进展。

基本上就这些。用 max-height 是最稳的折中解；需要严苛体验就上 JS 精确控制；别硬刚 height: auto + transition——它本来就不行。