overflow: hidden 会打断 transition 渲染管线，因创建 bfc 并抑制布局反馈，导致 height/width 等依赖重排的过渡卡顿或跳变；opacity 和 transform 因走合成层通常不受影响。
overflow: hidden 会打断 transition 的渲染管线
父容器设了 overflow: hidden，子元素的 transition（尤其是依赖布局变化的，比如 width、height、left）常会卡顿或完全不触发——这不是 bug，是浏览器主动跳过重排计算。因为 overflow: hidden 强制创建新的块格式化上下文（BFC），同时抑制了部分布局反馈路径，导致 transition 起始帧丢失或中间值无法插值。
- 常见现象：展开动画“啪”一下就完成，没有渐变；DevTools 的
Computed面板里transition声明还在，但animation时间线为空 - 特别危险的是
height: auto → height: 200px这类过渡：即使写了transition: height 0.3s，只要父级有overflow: hidden，浏览器大概率直接跳到终态 - 不是所有属性都受影响：
opacity和transform通常还能动，因为它们走合成层，不触发重排
为什么 display 切换 + overflow: hidden 是双重失效
display: none → block 本身不可动画，而 overflow: hidden 又会让父容器“拒绝参与布局响应”，两者叠加后，子元素连初始渲染状态都拿不准——JS 设置完 display: block 立刻改 opacity，浏览器仍可能合并为单帧渲染，起始透明度根本没被记录。
- 别用
display控制显隐再配transition：它和overflow: hidden是天然冲突组合 - 正确做法是统一用
opacity+transform+visibility，把display留到最后一步（transitionend里补） - 如果必须保留
display切换逻辑，就得靠强制重排：先设parent.style.display = 'block'，再读一次parent.offsetHeight，再操作子元素样式
替代方案：用 transform 替代 layout 类属性
对嵌套结构做收起/展开时，height 和 max-height 在 overflow: hidden 下极不稳定。真正可靠的是 transform: scaleY() —— 它绕过布局计算，只改绘制矩阵，且与 overflow: hidden 兼容性极好。
- 写法示例：
transition: transform 0.25s ease-out, opacity 0.25s ease-out - 展开时设
transform: scaleY(1)，收起时transform: scaleY(0)，配合transform-origin: top控制展开方向 - 父容器必须不设固定
height，否则transform会被裁掉；若需撑高，用padding-bottom或伪元素占位 - 注意：
scaleY(0)后元素仍占文档流，如需彻底移出，得在transitionend里加display: none
容易被忽略的祖先层干扰
失效往往不在直接父级，而在向上 2–3 层的某个容器悄悄加了 overflow: hidden —— 比如全局弹窗遮罩、Tab 内容区、或 CSS-in-JS 动态注入的 wrapper。这些节点不会出现在你写的源码里，但会静默截断整个子树的过渡能力。
- 排查方法：选中目标元素 → DevTools
Computed面板 → 看transition是否被覆盖为none→ 再逐级点 parent，盯紧每层的overflow-x和overflow-y计算值 - 临时验证：给可疑祖先加
overflow: visible !important，如果动画立刻恢复，问题就锁定了 - 修复优先级：能删就删；不能删就用
clip-path: inset(0)替代（现代浏览器支持良好），它视觉效果一致，但不创建新 BFC，不影响 transition
transform + opacity 实现了流畅收起，只要没在 transitionend 里检查 event.propertyName === 'transform' 并补上 display: none，那个元素就一直挂在 DOM 里，持续参与重排、占用内存、甚至干扰屏幕阅读器。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
