不能直接用 transition: height 实现面板展开动画，因为 height: auto 无法参与过渡；应使用 max-height 过渡或 JS 动态设置精确高度。
直接用 transition: height 实现面板展开动画，却出现“布局突然挤压”——这通常是因为 height 从 0 变到 auto 时，CSS 无法过渡 auto 值，浏览器会跳过动画，瞬间完成渲染，造成视觉上的“挤压感”或“闪跳”。
问题根源：height: auto 无法参与 transition
CSS 的 transition 只支持可计算的数值（如 100px、2rem），而 height: auto 是一个不可动画的关键词。当你写：
.panel.open { 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，生产环境慎用：
height: 0;
}
.panel { transition: height 0.3s; }
.panel.open { height: auto; }
现阶段不推荐作为主力方案，可关注后续浏览器支持进展。
基本上就这些。用 max-height 是最稳的折中解；需要严苛体验就上 JS 精确控制；别硬刚 height: auto + transition——它本来就不行。
