height: auto 无法过渡导致跳动，因浏览器无法计算具体像素值；应改用 max-height 过渡，设为 0→足够大值（如500px）并配合 overflow: hidden；动态高度可用 JS 读取 scrollHeight 实现自动适配。
直接对 height 使用 transition 会导致跳动，因为 height: auto 无法被浏览器计算出过渡起止值。解决的关键是改用 max-height 过渡，并配合合理取值和时机控制。
为什么 height + transition 会跳动
浏览器无法对 height: auto 做插值动画——它不知道“自动高度”具体是多少像素，于是跳过过渡、瞬间展开或收起。即使写成 height: 0 → height: 200px，一旦内容动态变化（如字体大小调整、响应式断点切换），固定值又会失效。
用 max-height 实现平滑过渡的要点
max-height 是可动画的 CSS 属性，且支持 auto 的替代方案。只需确保过渡起始/结束的 max-height 值覆盖实际内容高度即可：
- 关闭时设为
max-height: 0，并搭配overflow: hidden - 展开时设一个“足够大但不过量”的值，比如
max-height: 500px（根据内容预估） - 过渡写在
max-height上：transition: max-height 0.3s ease-in-out - 避免同时过渡
height或opacity等，防止节奏不一致
进阶：自动适配内容高度（无需预估）
如果内容高度不可预测（如富文本、多行标题），可用 JS 动态读取真实高度再设置：
立即学习“前端免费学习笔记（深入）”；
- 点击展开前，先将元素设为
max-height: none并强制重排（offsetHeight触发） - 读取
scrollHeight，赋给max-height - 再移除
max-height: none，让过渡生效 - 收起时设回
max-height: 0，并在过渡结束后清除内联样式，保持可维护性
补充细节提升体验
仅靠 max-height 还可能有轻微卡顿或收不严，注意以下细节：
- 添加
will-change: max-height（慎用，仅在性能不佳时尝试） - 收起末尾加
overflow: hidden防止内容溢出闪现 - 若含 padding/margin，过渡中它们不会动，建议用
padding包裹内容层，或统一用transform: scaleY()替代（需额外处理布局影响） - 移动端注意
touch-action: manipulation避免延迟响应
