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，浏览器大概率合并为单帧渲染——起始高度压根没被记录。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 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 一起删掉，动画就还是不会动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！