opacity为0元素仍可点击，因其仅改变视觉透明度而不影响事件流；需先完成opacity过渡再添加pointer-events: none，避免动画中断，且须用transitionend监听并校验propertyName。
opacity过渡完成后元素仍可点击，是因为它还在事件流里
opacity只是改变视觉透明度，不改变元素的交互状态。哪怕opacity: 0，只要没显式关掉事件响应，浏览器照常把鼠标、触摸事件分发给它——它就像个“透明幽灵”，看不见但挡路。
pointer-events: none不能和transition一起直接写在同一个class里
常见错误是这样写：.hidden { opacity: 0; pointer-events: none; transition: opacity 0.3s; }。结果动画一触发，pointer-events: none立刻生效，opacity过渡直接被中断，视觉上就是“啪一下消失”，没有淡出效果。
- 必须分两步：先只动
opacity，等动画结束再加pointer-events: none - 推荐用
transitionend事件监听，且校验e.propertyName === 'opacity'，避免其他属性干扰 - JS中不要同步设置
style.opacity = '0'后立刻加pointer-events，得等帧完成
visibility: hidden也不能替代pointer-events: none
visibility: hidden会让元素不可见、保留占位，但它**完全不阻止事件**——hover、click照样触发。很多人误以为“看不见=点不到”，其实它比opacity: 0更危险：前者连视觉反馈都断了，但事件拦截能力一点没少。
-
visibility: hidden+opacity: 0组合，依然要配pointer-events: none才安全 - 如果目标是彻底退出交互，
display: none最干脆，但它无法参与过渡动画 - 真正需要“淡出+禁用点击”的场景，标准流程是：
opacity → transitionend → visibility: hidden + pointer-events: none
移动端 touchstart 时机容易让点击穿透失效
在 iOS Safari 或部分安卓 WebView 中，transitionend可能延迟触发或丢失，导致pointer-events: none没及时加上。用户快速点击时，仍可能点中那个“刚变透明但还没禁用事件”的瞬间。
立即学习“前端免费学习笔记（深入）”；
- 保险做法：在
transitionend回调里加一层setTimeout(() => {}, 0)确保 DOM 更新完成 - 或者改用
will-change: opacity提前提示合成层，减少渲染管线延迟 - 别依赖
opacity: 0作为唯一判断依据——加个data-state="hiding"状态标记更可靠
最容易被忽略的点：opacity为0的元素，不仅可点击，还会影响tab键顺序、触发:focus-within、撑开父容器高度。它不是“隐藏”，只是“穿了隐身衣”。真正的收尾动作，永远在动画之后。
