pointer-events 不随动画自动变化，需用 js 显式控制：动画开始前设 none，结束时还原 auto；子元素设 auto 无法绕过父级 none；禁用交互须同步处理 aria-disabled、tabindex 等可访问性属性。
pointer-events 在动画中不是“控制交互”的开关，而是决定「事件是否能落到这个元素上」——它不随动画状态自动变化，也不会暂停或恢复事件监听。想让动画期间可点/不可点，得靠显式切换 pointer-events 值，而不是依赖动画本身。
动画开始时禁用点击：用 JS 主动设 pointer-events: none
CSS 动画（@keyframes）本身不触发 pointer-events 变更。常见误操作是写：.animating { pointer-events: none; animation: slide 0.3s; } —— 这只会让元素从一开始就不响应点击，和动画进度无关。
正确做法是监听动画生命周期：
- 在 JS 中调用
element.animate()或添加 class 触发动画前，先设element.style.pointerEvents = 'none' - 监听
animationend事件，再还原为'auto' - 若用 CSS transition，监听
transitionend更稳妥（animationend在动画被 cancel 时可能不触发）
动画中部分区域需可交互：避免父级 pointer-events: none
比如一个弹窗带入场动画，同时内部有个关闭按钮。如果给整个弹窗容器设 pointer-events: none 再靠子元素设 auto 挽救——按钮依然点不了。
原因很明确：pointer-events: none 会跳过整棵 DOM 子树的命中测试，子元素设 auto 完全无效。
可行方案：
- 把关闭按钮提到弹窗容器外，用绝对定位覆盖上去（确保 z-index 合理）
- 用
Portal渲染按钮到下，彻底脱离动画容器的 DOM 路径 - 只对遮罩层（mask）设
pointer-events: none，而弹窗主体保持auto，按钮自然可用
transition 动画 + pointer-events 的兼容性坑
pointer-events 本身支持 transition，但浏览器行为不一致：
- Chrome 和 Firefox 允许
pointer-events在auto/none间过渡，但实际效果是“瞬间切换”，没有中间态 - Safari（iOS 13.4+ 之前）会忽略
pointer-events的 transition 声明，直接跳变 - 别写
transition: pointer-events 0.2s——它不会产生“渐进失效”效果，只是徒增不可靠性
真正需要“渐进禁用”，得靠 opacity + pointer-events 组合，并用 JS 控制时机，而非依赖 CSS 过渡。
动画结束仍需保留交互状态？小心 focus 和键盘访问
pointer-events: none 只影响鼠标/触摸事件，不影响键盘焦点、tabindex、表单提交或屏幕阅读器读取。
典型问题：
- 按钮在动画中设了
pointer-events: none，但用户用 Tab 键仍能聚焦并回车触发 - 视觉上“禁用”，但辅助技术用户完全感知不到状态变化
所以，如果目标是完整禁用交互，必须同步处理：
- 加
aria-disabled="true" - 设
tabindex="-1"（移出 tab 顺序） - 配合
disabled属性（仅限<button></button>、<input>等原生控件）
单纯靠 pointer-events 实现“禁用”，在可访问性层面是残缺的。
最常被忽略的一点：动画中的交互控制，本质是状态管理问题，不是样式问题。pointer-events 只是其中一个工具，它不能替代 JS 对交互生命周期的判断和同步处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
