height: auto无法触发CSS过渡动画，因其非数值、无像素量纲，浏览器无法插值计算；overflow: hidden和display: none进一步阻断重排反馈与过渡上下文，导致动画失效。
因为 height: auto 不是数值，浏览器无法插值；overflow: hidden 会打断重排反馈路径，导致起始帧丢失；display: none 切换本身不可动画，三者叠加后过渡引擎根本拿不到有效计算上下文。
height: auto → height: 200px 根本不触发过渡
浏览器看到的是 “0 → ?”，不是 “0 → 248px”。auto 是布局阶段动态推导的结果，没有像素量纲，transition 引擎连起点和终点都算不出来，只能硬切。
- DevTools 的 Computed 面板里
height值在 0 和auto之间跳变，时间线为空 -
!important、反复读offsetHeight或加force reflow都无效——这不是触发时机问题，是底层不支持 - 真正能动的只有具体数值：比如
height: 0→height: 248px，但前提是这个 248px 可靠且固定
overflow: hidden 让 transition 渲染管线“失联”
它强制创建 BFC，同时抑制了布局反馈路径。依赖重排的属性（如 height、width、left）会直接被浏览器跳过中间帧计算。
- 常见现象：“啪”一下就展开，收起倒有动画（因收起是从具体值→0，可插值）
- 失效常不在直接父级，而藏在向上 2–3 层某个全局容器里，比如弹窗遮罩层或 layout wrapper
-
opacity和transform通常还能动，因为它们走合成层，不依赖重排
display 切换 + overflow: hidden = 双重阻断
display: none 移除元素后，再设 display: block + 改 height，浏览器大概率合并为单帧渲染——起始高度压根没被记录。
立即学习“前端免费学习笔记（深入）”；
- JS 中必须拆成三步：
el.style.display = 'block'→void el.offsetHeight（强制重排）→el.style.height = '200px' - 更稳的写法是彻底避开
display：用opacity: 0+visibility: hidden+transform: scaleY(0)控制显隐，最后在transitionend里补display: none - 若必须用
max-height模拟，值不能设none或fit-content（不可插值），推荐max-height: 40rem（响应式友好）或略大于预估内容的像素值（如 300px）
真正可靠的尺寸过渡方案只有两个
一是用 transform: scaleY() 绕过布局计算，二是用 grid-template-rows: 0fr → 1fr 配合 overflow: hidden。前者轻量无 JS，后者真自适应但需重构为 Grid。
-
scaleY()要配transform-origin: top，且父容器不能设固定height，否则会被裁掉 -
grid方案必须写transition: grid-template-rows 0.3s ease，只写all不生效 - 所有方案都要把
transition规则抽离到基础类中，避免随状态类一起被移除——否则动画退化为瞬时变化
最易被忽略的是祖先层干扰和 transition 声明的存活周期：哪怕你写对了 scaleY，只要上三级有个 overflow: hidden 的 layout 容器，或者 transition 被绑在 hover 类里随 class 一起删掉，动画就还是不会动。
