height: 0 到 auto 无法过渡，因浏览器不支持对 auto 插值；应改用 max-height 配合 overflow: hidden、opacity 和 visibility 实现平滑过渡。
用 height 和 opacity 做过渡时，为什么高度没动？
因为 height: 0 到 height: auto 无法被 CSS 过渡识别——浏览器不支持对 auto 值做插值计算。常见表现是：透明度渐显了，但元素突然“啪”一下弹出来，毫无高度过渡效果。
解决思路是避开 auto，改用具体数值或替代属性：
- 提前知道内容最大高度？设固定
height（如height: 200px），再配合overflow: hidden - 不知道高度？用
max-height替代height，设一个足够大的安全值（比如max-height: 500px），它支持过渡且能兜住多数内容 - 始终搭配
opacity和visibility控制显示逻辑，避免过渡中仍可交互或占布局空间
max-height 过渡的写法和关键细节
这是最常用、兼容性好、不用 JS 的方案。注意三点：起始值必须是 0，结束值必须是明确数字（不能是 none 或 auto），且需设 overflow: hidden。
/* 隐藏态 */
.collapse {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
<p>/<em> 显示态 </em>/
.collapse.active {
max-height: 500px; /<em> 要大于内容实际高度 </em>/
opacity: 1;
visibility: visible;
}如果内容高度可能超 500px，就调大这个值；太小会截断。别用 100vh 或百分比——它们在某些浏览器里不触发过渡。
立即学习“前端免费学习笔记（深入）”；
为什么还要加 visibility？
opacity: 0 只让元素“看不见”，但它仍占据空间、能响应点击、影响 tab 键顺序。而 height/max-height 为 0 时，若没关 visibility，可能因子元素有绝对定位或 margin 导致父容器仍有微小高度残留。
-
visibility: hidden让元素完全退出渲染树交互流，但保留原有布局占位（这点和display: none不同） - 配合
opacity: 0实现视觉隐藏，配合max-height: 0实现空间收缩 - 过渡结束后再切到
display: none（如用 JS）是进阶优化，纯 CSS 不需要
真正平滑的关键：过渡时机与触发方式
过渡是否生效，取决于类名切换是否发生在样式计算完成之后。直接 JS 设置 className 通常没问题，但若在同一个任务里先改类、再读 offsetHeight，可能拿不到新样式，导致过渡失效。
常见陷阱：
- 用
element.style.height = '0'再改className—— 行内样式优先级高于 class，会覆盖过渡声明 - 在 Vue/React 中直接绑定
class="{ active: show }"没问题，但若用v-show或ngIf就会删 DOM，过渡根本不会启动 - 想用
transitionend回调时，注意它可能因opacity和max-height结束时间微差而触发两次
最稳的做法：只靠 class 控制状态，所有样式都写在 CSS 里，JS 只负责加/删类。
