17370845950

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 避免延迟响应