只用 opacity 会导致移动端遮罩卡顿或点击失效，因其仍占布局、响应事件、触发重排，易引发掉帧和点击穿透；需配合 visibility 与 pointer-events 控制，并注意定位、过渡过滤等隐性坑。
为什么只用 opacity 会导致移动端遮罩卡顿或点击失效
opacity 动画本身是可硬件加速的，但单独使用时，元素仍占据布局空间、响应事件、参与重排——这会让浏览器在 touch 事件密集时反复计算渲染层，尤其在低端安卓机或 iOS Safari 中容易掉帧、延迟触发 transitionend。更常见的是：用户点一下遮罩没反应，其实是点击穿透到了下层，因为 pointer-events 没关，或者 opacity: 0 后元素还在“可点击”状态。
visibility + opacity 联动的正确写法与时机控制
visibility 控制是否参与渲染流和事件分发，opacity 控制视觉渐变，二者必须配合且过渡时长不同。关键不是“一起动”，而是让 visibility 快切、opacity 慢变：
-
transition必须写在初始类里，例如：.overlay { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.1s steps(1, end); } - 显示时加
.overlay.show类：opacity: 1; visibility: visible; - 隐藏时移除该类，让 transition 自动反向执行；
visibility用steps(1, end)是为了“瞬间收尾”，避免出现不可见却仍可点的幽灵层 - 千万别设
transition: all，尤其当遮罩内有transform或backdrop-filter时，会拖慢整个动画
移动端必须处理的三个隐性坑
这些坑在桌面端不明显，但在 iOS 和安卓 WebView 中高频出现：
-
position: fixed在某些安卓版本中会随页面滚动偏移，必须补inset: 0（或显式写top: 0; right: 0; bottom: 0; left: 0），尺寸用width: 100vw; height: 100vh;，不用100% -
pointer-events: none得加在遮罩自身，内部按钮等交互元素再用pointer-events: auto显式恢复；别在 JS 里动态改el.style.pointerEvents，CSS class 切换更稳 - 监听
transitionend时必须过滤：if (e.propertyName === 'opacity')，否则visibility和opacity各触发一次，回调执行两遍，状态容易错乱
rgba() 背景替代 opacity 的适用场景
如果遮罩层只含纯色背景、无子内容，直接用 background: rgba(0, 0, 0, 0.6) 比设 opacity: 0.6 更优——前者不影响子元素清晰度和点击热区，后者会让文字发虚、按钮响应变弱，尤其在 iPhone 上渲染锯齿明显。但注意：这个方案不能用于需要淡入文字或按钮的遮罩，因为子元素透明度不受控。
真正难的不是写对那几行 CSS，而是把 pointer-events 分层、transitionend 过滤、inset 定位这三件事在每个项目里都检查一遍。漏掉任何一个，移动端用户就可能点不到关闭按钮，或者动画闪一下就没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
