必须为pointer-events添加延迟才能与opacity动画同步，因其不支持插值，仅auto/none两个离散值；正确写法是transition: opacity 0.4s ease, pointer-events 0s 0.4s，实现动画完成瞬间才启用交互。
transition中pointer-events必须加延迟才能配合opacity动画
直接写 transition: opacity 0.3s ease, pointer-events 0.3s 会导致交互状态提前切换，半透明时仍可点，或动画中途卡住。浏览器对 pointer-events 不支持插值，它只有 auto 和 none 两个离散值，过渡只能靠“延迟生效”来模拟同步。
正确写法是把 pointer-events 的过渡设为 0s 延迟 + 动画时长，例如：
.fade {<br> opacity: 0;<br> pointer-events: none;<br> transition: opacity 0.4s ease, pointer-events 0s 0.4s;<br>}<br>.fade.active {<br> opacity: 1;<br> pointer-events: auto;<br>}
-
pointer-events 0s 0.4s表示：立即应用新值（auto），但等 0.4s 后才真正生效 - 这样 opacity 从 0→1 动画进行时，元素仍不可点；动画结束瞬间，
pointer-events才变为auto - 反向隐藏时同理：先触发
opacity动画，结束前保持可点；动画一停，pointer-events立刻切回none
opacity + pointer-events 不等于安全隐藏
即使用了 opacity: 0 和 pointer-events: none，元素依然在 DOM 中、仍占文档流位置、仍能被 document.querySelector 获取、屏幕阅读器默认也会读取——这不是语义上的“隐藏”，只是视觉+交互屏蔽。
- 敏感信息不能靠这个“隐藏”，比如密码字段切换时的明文预览
- 想让兄弟元素上移？仅靠 opacity 不行，得配合
max-height: 0/height: 0过渡，或 JS 在transitionend里设display: none - 需要跳过屏幕阅读器？优先加
aria-hidden="true"，而不是依赖visibility: hidden（后者会影响布局）
为什么不能只用opacity过渡就完事？
常见错误是只写 opacity: 0 → 1 加 transition，结果发现元素明明“看不见”了，却还能点、还能触发 hover、甚至挡住下面的按钮——这就是没配 pointer-events 的典型表现。
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0元素仍在渲染树中，鼠标事件照常冒泡和捕获 - 如果父容器有
overflow: hidden或子元素含position: absolute，还得单独检查其pointer-events是否被继承或覆盖 - 移动端 touch 事件同样受
pointer-events控制，不加的话，iOS 上可能误触穿透
transitionend事件里要校验propertyName
给元素绑 transitionend 时，别直接在回调里删 class 或改 display，因为一次 class 切换可能触发多个属性过渡（比如你写了 transition: all，或者同时动了 opacity 和 transform）。
必须判断 e.propertyName === 'opacity' 再执行后续逻辑：
el.addEventListener('transitionend', (e) => {<br> if (e.propertyName !== 'opacity') return;<br> if (el.classList.contains('fade')) {<br> el.style.display = 'none'; // 隐藏后释放占位<br> }<br>});
否则容易出现：opacity 动画还没完，display 就先设成 none，动画直接中断，“啪”一下消失。
实际中最容易被忽略的是pointer-events 的延迟语法写法，以及 transitionend 的属性过滤——这两处一错，整个显隐流程就失去可控性。 
