transition 本身不会导致裁剪，但与 overflow: hidden 搭配时，因 transform 不改变文档流，浏览器仍按原始坐标系裁剪，致动画中途被截断；解决方案包括将动画元素移出裁剪容器、改用 max-height 过渡或父容器设为 display: flow-root。
transition 本身不会导致裁剪，但和 overflow: hidden 搭配时，动画过程会暴露裁剪边界 —— 尤其当元素用 transform 移出原位置，却仍被父容器的裁剪框锁死。
transition 触发后内容突然消失或只闪一下
这是最常见现象：比如点击展开菜单，transform: translateY(0) 动画执行中，内容刚滑到一半就“断掉”了。根本原因不是 transition 写错了，而是父容器设置了 overflow: hidden，而菜单又用了 position: absolute 或脱离文档流的 transform 动画。
- 浏览器在 transition 过程中仍严格按
overflow: hidden的 border box 裁剪 —— 即使视觉上元素已移入视区，只要它的“原始占位”或定位参考框没变，超出部分就被静默截断 - 如果菜单 DOM 在
.nav-item内部，而该父元素同时有overflow: hidden和position: relative，那它就成了包含块 + 裁剪边界，z-index再高也出不去 - 用 Chrome DevTools 的 “Rendering → Paint flashing” 可快速验证：被裁区域完全不触发绘制
为什么 transform 动画特别容易被裁？
transform 不改变文档流位置，所以浏览器仍以元素原始坐标系计算溢出 —— 但它又真实改变了渲染位置，这就让 overflow: hidden 的裁剪行为变得“不可见但强硬”。
- 例如：
.menu { transform: translateY(-100%); }默认藏在上面，点击后加.open .menu { transform: translateY(0); }—— 如果父容器是overflow: hidden，那整个滑入过程都在裁剪框内发生；一旦起始/终点超出 border box，中间帧就被切掉 - 更隐蔽的情况：父容器有
will-change: transform或opacity: 0.99，会提前创建层叠上下文，强化裁剪锁定效果 - 不要依赖
display: none ↔ block切换来绕开 —— 它会中断 transition 链，动画直接跳变
哪些替代方案能避开裁剪副作用？
目标不是禁用 overflow: hidden，而是让它不干涉动画区域。现代方案优先级如下：
立即学习“前端免费学习笔记（深入）”；
- 把动画元素移到裁剪容器外：用
ReactDOM.createPortal（React）或document.body.appendChild()（原生）挂到body下，再用 JS 计算定位 - 改用
max-height+transition：虽然动画曲线不如transform流畅，但完全绕过裁剪逻辑，兼容性稳 - 父容器换
display: flow-root：它同样解决浮动塌陷，且不触发裁剪；比overflow: hidden更语义化、更安全 - Safari 下圆角+过渡失效？必须加
-webkit-mask遮罩，仅靠overflow: hidden+border-radius不可靠
真正难处理的从来不是 transition 写法，而是你没意识到那个默默生效的 overflow: hidden 父元素，早已把整个动画框死在 border box 里 —— 它不报错，不警告，只安静地裁掉每一帧。
