height: auto 无法过渡导致跳动，因浏览器无法计算具体像素值；应改用 max-height 过渡，设为 0→足够大值（如500px）并配合 overflow: hidden；动态高度可用 JS 读取 scrollHeight 实现自动适配。
直接对 height 使用 transition 会导致跳动，因为 height: auto 无法被浏览器计算出过渡起止值。解决的关键是改用 max-height 过渡，并配合合理取值和时机控制。
浏览器无法对 height: auto 做插值动画——它不知道“自动高度”具体是多少像素，于是跳过过渡、瞬间展开或收起。即使写成 height: 0 → height: 200px，一旦内容动态变化（如字体大小调整、响应式断点切换），固定值又会失效。
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 包裹内容层，或统一用 transform: scaleY() 替代（需额外处理布局影响）touch-action: manipulation 避免延迟响应以上就是css高度变化出现跳动怎么办_结合transition与max-height实现平滑展开的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
281
收藏
取消收藏
