根本原因是height: 50%依赖父容器明确高度，若html/body/父级任一环节为height: auto，则计算链断裂导致起始高度为0px，过渡在0→0间发生而不可见。
transition 无法作用于 height: 50% 的根本原因
不是 transition 写错了，而是 height: 50% 在过渡开始前就“没算出来”。浏览器必须先知道起始高度和结束高度的具体像素值，才能插值动画；而百分比高度依赖父容器的明确高度（非 auto），若父级高度未定义，height: 50% 实际计算为 50% × 0px = 0px，整个 transition 就在 0 → 0 之间发生——视觉上完全不动。
为什么给父元素加 height: 100% 还是无效
常见错误是只设 body { height: 100% }，但漏了 html。CSS 百分比高度的计算链必须从根元素开始打通：html → body → 父容器 → 目标元素。任意一级是 height: auto（默认值），整条链就断开。
-
html没设高度 →body的100%无依据 → 计算为auto -
main或section是 flex 容器但没设height或min-height→ 子元素的%高度仍无上下文 - 用
vh可绕过此链，但注意移动端地址栏缩放时100vh可能不等于屏幕物理高度
替代方案：用具体数值 + overflow: hidden 实现可过渡的高度
比起死磕百分比，更可靠的做法是放弃 height: X%，改用可插值的具体值：
- 初始状态设
height: 0+overflow: hidden（防止内容撑开） - 展开目标设为固定值，如
height: 200px或height: 3rem - 若需响应式，可用
max-height替代（但目标值要远大于实际内容高度，否则动画会“刹不住”） - 性能敏感场景优先用
transform: scaleY(0)→scaleY(1)，配合transform-origin: top，避免触发布局重排
Flex 布局下百分比高度为何有时“看起来有效”
因为 display: flex 的父容器若设了明确高度（如 height: 400px），其子项的 height: 100% 就有了计算基准；但若父容器本身高度仍是 auto，子项的百分比依然失效。别被“flex 让它动了”误导——真正起作用的是那个被显式设定的父容器高度，不是 flex 本身赋予了百分比能力。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的一点：过渡生效的前提不是“写了 transition”，而是“浏览器在两个状态间能拿到两个确定的像素高度”。百分比只是语法糖，背后全是像素计算。链路不完整，糖就化不了。
