pointer-events 不支持 CSS 过渡动画，浏览器直接忽略 transition 声明，切换为瞬时生效；正确做法是用 JS 在动画开始前设 pointerEvents = 'none'，在 transitionend 中恢复。
pointer-events 属性不支持 CSS 过渡动画
浏览器根本不支持对 pointer-events 做 transition。你写 transition: pointer-events 0.3s，它不会渐变、不会插值、也不会触发任何中间状态——CSS 引擎直接忽略该声明，属性切换是瞬间完成的。所谓“阻断交互动画”，其实是误以为它能过渡，结果在动画帧中出现了不可预期的事件响应窗口。
opacity 动画 + pointer-events 切换必须用 JS 控制时机
常见错误是：给遮罩层设 opacity: 0; pointer-events: none，再用 transition: opacity 0.3s 淡入，以为 opacity 变化时 pointer-events 会同步生效。实际行为是：pointer-events 在 opacity 开始变化前就已设为 none（或仍为 auto），导致整个动画过程中存在一段“半透明但可点击”或“已不可点但视觉还没出现”的错位窗口。
- 正确做法是在
opacity动画触发前，用 JS 立即设置element.style.pointerEvents = 'none' - 在
transitionend回调里，再切回'auto'（淡入结束）或保持'none'（淡出结束） - 避免用
@keyframes直接控制pointer-events，Safari 和部分安卓 WebView 对动画中该属性的解析不稳定
父级设 none 后子元素 auto 无效，和动画无关但常被混淆
这不是动画问题，而是事件捕获机制本身决定的：一旦父容器设了 pointer-events: none，浏览器在捕获阶段就跳过整棵子树，子元素写 pointer-events: auto 完全不生效。这个行为在静态和动画中都一样，但动画场景下更容易暴露——比如你试图在工具栏淡入时逐个恢复按钮响应，结果发现按钮始终点不了。
- 不要把可交互子元素嵌在
pointer-events: none的父容器内 - 需要局部响应时，用 Portal 渲染到 body 下，或用伪元素/绝对定位绕开 DOM 层级
- 动画中频繁切换层级结构时，DOM 重排可能让事件区域计算延迟，建议加
will-change: transform提示合成层
移动端 touch 事件链不依赖 pointer-events，容易漏处理
在 iOS Safari 或部分安卓 WebView 中，touchstart 的触发早于 click，且不完全受 pointer-events 控制。如果你只靠 CSS 切换 pointer-events 来禁用遮罩，用户快速点击时仍可能触发底层 touchstart，造成穿透误操作。
立即学习“前端免费学习笔记（深入）”；
- 必须配合 JS 监听
touchstart并调用event.preventDefault() - 避免仅依赖
click事件做拦截，它有 300ms 延迟，期间pointer-events状态可能已变更 - 真机测试不可省，模拟器无法复现 touch 事件链与渲染管线的时序竞争
pointer-events 最容易忽略的点，不是它能不能动，而是它根本不动——你写的 transition 是假动作，真正起效的是 JS 手动控制的那两个瞬间。 
