transition失效主因是dom状态、布局计算和事件流向失控：display切换导致元素脱离渲染树、初始transform值未显式声明、内联样式覆盖css过渡、auto值无法插值、pointer-events/overflow/z-index配置不当引发点击穿透或抖动。
transition 本身不会穿帮，穿帮是因为你没管住 DOM 状态、布局计算和事件流向这三个关键点。
为什么点击后菜单“闪一下才滑”或“关不回去”
根本原因是 transition 没被真正触发，或者被中途打断。常见情况包括：
-
display: none和display: block切换：浏览器一设display: none，整个元素就从渲染树里摘掉了，transform过渡直接失效 - 初始
transform值没写全：比如只写了transform: translateX(-100%)，但父容器没设width，导致 -100% 计算结果为 0，动画起始点就是 0 → 0，不动 - JS 直接改
element.style.transform = 'translateX(0)'：内联样式优先级太高，会覆盖 CSS class 里的transition声明（尤其在某些旧版 Safari 中） - 用
left/right动画但初始值是auto：浏览器无法在auto → 0px之间插值，transition 静默失败
为什么抽屉打开后还能点到背后按钮
这不是 transition 的问题，而是 pointer-events 和滚动层叠没对齐：
- 遮罩层（overlay）没加
pointer-events: auto（有些 reset.css 默认设成none） - 主内容区没在抽屉打开时加
pointer-events: none，仅靠z-index不够——iOS Safari 对 pointer-events 的生效有延迟 -
body没加overflow: hidden，用户滚动时抽屉跟着动，遮罩层错位，露出可点击区域 - 遮罩层
z-index比抽屉低，或比主内容高，导致层级断裂
为什么滑到一半卡住、跳变或抖动
本质是浏览器在动画过程中反复重排（reflow），常见诱因：
- 抽屉容器没设固定
width，内部文字/图片加载导致宽度变化，transform动画中尺寸突变 - 用了
max-height过渡：设了max-height: 0 → 500px，但内容实际高度超过 500px，被截断；或设太大，动画前半段快、后半段拖沓 -
overflow: hidden漏加在抽屉容器上：滚动条出现/消失引发视口宽度跳变，间接影响translateX(-100%)的计算基准 - 没加
will-change: transform或transform: translateZ(0)，低端安卓 WebView 不触发 GPU 合成，动画掉帧明显
为什么桌面端横竖屏切换后菜单状态错乱
纯 JS 控制 class 开关 + 媒体查询混用，会导致状态不同步：
- 用
matchMedia监听(max-width: 768px)，但 JS 里只切.drawer--open，没考虑 PC 端该常驻显示 - CSS 媒体查询里写了
@media (min-width: 769px) { .drawer { transform: translateX(0) !important; } }，强行覆盖 JS 状态，关不掉 - 响应式逻辑写在 JS 里，resize 事件没防抖，频繁触发状态切换，class 来回翻转
最易被忽略的一点：抽屉容器必须同时满足「固定定位 + 显式宽高 + 不依赖 display 切换」，缺一不可。哪怕只漏一个，transition 就可能在某个机型或某个操作路径下突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
