CSSheight动画不流畅？试试max-height实现平滑过渡

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《CSS height 无法平滑过渡的解决方法：使用 max-height 实现展开收起动画》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

height设为auto时无法过渡，因auto非具体数值，浏览器无法插值；应改用max-height配合overflow:hidden实现过渡。

为什么 height 设置为 auto 时无法过渡

CSS 的 transition 只能对可计算的数值型属性做平滑插值，而 height: auto 不是一个具体数值，浏览器无法知道“从 0px 到 auto”该按什么步长变化，直接跳变是必然结果。哪怕你写 transition: height 0.3s ease，只要其中一端是 auto，过渡就失效。

用 max-height 替代 height 的实操要点

核心思路是：用一个足够大的固定值（如 max-height: 500px）代替 auto，让浏览器始终在两个确定数值间过渡。但这个值不能瞎填，否则会暴露动画卡顿或收不严的问题。

• 选值要略大于内容最大可能高度（比如含最多 5 行文字、1 张图片的容器），避免中途截断
• 起始状态设 max-height: 0 + overflow: hidden，结束状态设 max-height: 500px
• 必须加 overflow: hidden，否则内容会在 max-height 超出时溢出并可见
• 过渡时间建议用 cubic-bezier(0.4, 0, 0.2, 1) 比默认 ease 更自然，尤其收起时减速明显

max-height 过渡的典型 CSS 写法

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
<p>.collapsible.open {
max-height: 500px; /<em> 根据实际内容调整 </em>/
}</p>

注意：不要用 height 做触发，而是靠 class 切换控制 max-height；JS 中只需 el.classList.toggle('open') 即可。

容易被忽略的边界问题

如果内容高度动态变化（比如用户输入、异步加载后重排），预设的 max-height 值可能不够或过大。此时要么重新计算并内联设置（麻烦），要么改用 JS 驱动的 getBoundingClientRect().height + height 过渡（更准但失去纯 CSS 优势）。多数场景下，保守估一个略大的固定值，比追求绝对精确更实用。

今天关于《CSSheight动画不流畅？试试max-height实现平滑过渡》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！