scale(0)后元素仍响应点击但极难触发，因热区塌缩至像素级范围；pointer-events: none才真正禁用事件，display: none最稳妥。
transform: scale(0) 会让元素视觉上“消失”，但 DOM 仍存在、占位仍在、事件热区也还在——只是缩成一个点，坐标原点默认在元素中心，导致可点击区域塌缩到几乎为零。这不是点击穿透“失效”，而是点击根本落不到有效热区内。
scale(0) 后元素还响应点击吗？
响应，但极难触发：浏览器 hit-testing 仍基于原始布局尺寸计算，scale(0) 不改变 getBoundingClientRect() 返回的 width/height（它们仍是原始值），但视觉渲染和事件命中判定会受 transform 影响。实际热区被压缩到 (0, 0) 附近一个像素级范围，手指或鼠标基本点不中。
- 用
transform-origin改变缩放基点（如设为top left）能让热区偏移到左上角，但依然极小 -
scale(0.01)比scale(0)更可靠——热区虽小但可测，某些安卓 WebView 对scale(0)的事件分发直接跳过 - Chrome DevTools 的 “Rendering > Paint flashing” 可验证：缩放后元素是否仍有绘制区域；若完全不闪，说明连 hit-test 都没进入
为什么 pointer-events: none 不起作用？
它起作用，但加错了地方：pointer-events: none 是让元素**不参与事件流**，而你真正需要的是“不让用户点中它”，不是“让它不响应”。如果给 scale(0) 元素设 pointer-events: none，确实能透传点击，但这是靠禁用自身实现的，不是靠缩放——此时哪怕 scale(1)，只要 pointer-events: none 就一样透传。
- 常见错误：动画过程中只在 class 切换时设
pointer-events: none，但 transition 还没开始、元素还 visible 时，用户已点中 - 正确做法：在触发动画前，用 JS 立即设
element.style.pointerEvents = 'none'；动画结束（transitionend）后再恢复'auto' - 注意 Safari 对
pointer-events在transform动画中的更新有延迟，建议配合will-change: transform提前提示
替代方案：比 scale(0) 更可控的隐藏方式
除非真需要缩放动画效果，否则 scale(0) 是最差的隐藏选择。更稳妥的组合是：
- 视觉隐藏用
opacity: 0+visibility: hidden（后者确保不占交互热区） - 若需保持 DOM 占位做过渡，用
transform: scale(0.001)替代scale(0)，并显式设pointer-events: none防误触 - 完全移除交互意图时，优先用
display: none—— 它天然切断事件流，无兼容性包袱，且不依赖 transform 渲染状态
真正容易被忽略的点：scale 动画的事件行为在 iOS Safari 和部分 Android WebView 中不一致，有的版本把 scale(0) 当作不可见元素直接跳过 hit-test，有的却仍保留中心热区。不要依赖视觉消失来控制交互，该删就删，该禁就禁，别让 transform 承担本不属于它的职责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
