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);
}
.collapsible.open {
max-height: 500px; / 根据实际内容调整 /
}
注意：不要用 height 做触发，而是靠 class 切换控制 max-height；JS 中只需 el.classList.toggle('open') 即可。
容易被忽略的边界问题
如果内容高度动态变化（比如用户输入、异步加载后重排），预设的 max-height 值可能不够或过大。此时要么重新计算并内联设置（麻烦），要么改用 JS 驱动的 getBoundingClientRect().height + height 过渡（更准但失去纯 CSS 优势）。多数场景下，保守估一个略大的固定值，比追求绝对精确更实用。
立即学习“前端免费学习笔记（深入）”；
