按钮控制遮罩半透明度过渡需用JavaScript动态修改CSS变量或类名，配合CSS transition实现平滑变化；直接改opacity会跳变，必须声明transition作用于opacity而非自定义变量，且遮罩层需同级定位、避免父容器opacity干扰，移动端需加transform: translateZ(0)启用GPU加速。
按钮控制遮罩半透明度过渡，本质是用 JavaScript 动态修改 CSS 变量或类名，再靠 CSS transition 实现平滑变化；直接改 opacity 属性值会跳变，必须配合过渡声明和可动画属性。
用 CSS 自定义属性 + style.setProperty() 控制遮罩透明度
这是最灵活、无 DOM 操作、支持任意精度（如 0.17）的方式。遮罩层需基于伪元素或子元素，且其透明度由 CSS 变量驱动：
- 遮罩元素（如
.img-container::before）的opacity设为var(--mask-opacity, 0) - 按钮点击时调用
element.style.setProperty('--mask-opacity', '0.6') - CSS 中必须声明
transition: opacity 0.3s ease—— 注意不是 transition 自定义变量本身，而是作用在使用该变量的属性上 - 避免把变量用在
background-color: rgba(...)的 alpha 位，那不可动画；opacity 才是标准可过渡属性
用 class 切换实现预设档位（如“淡/中/浓”）
适合只有几个固定透明度值的场景，语义清晰、调试方便、不依赖 JS 运行时计算：
- 定义三组类：
.mask-fade { opacity: 0.2; }、.mask-mid { opacity: 0.5; }、.mask-strong { opacity: 0.8; } - 遮罩元素初始带一个基础类（如
mask-fade），并确保已声明transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) - 按钮绑定事件，用
el.classList.replace('old', 'new')替换，避免多次 add/remove 导致冗余 - 不要用
el.className = 'mask-mid'全量重写，会丢掉其他可能存在的功能性 class（如is-active）
常见错误：按钮点了但遮罩没过渡，只闪一下
这通常不是 JS 逻辑问题，而是 CSS 层面缺失关键约束：
立即学习“前端免费学习笔记（深入）”；
-
opacity值被父容器的opacity覆盖 —— 确保遮罩层和图片同级，且父容器没设opacity（它会让整个子树一起变透） - 遮罩元素没有
position: absolute或未被相对定位容器包裹，导致:hover或 JS 修改后定位错乱、视觉偏移 - CSS 中写了
transition，但目标属性名拼错，比如写成opactiy或transiton，浏览器静默忽略 - 初始状态没设
opacity: 0（或对应值），导致从「未声明」到「有值」触发的是 layout 而非 transition
移动端要注意 transform: translateZ(0) 防闪烁
某些安卓 WebView 和旧版 Safari 在伪元素上做 opacity 过渡时，会出现帧率不稳或首帧闪烁。这不是 bug，是渲染管线未启用 GPU 加速：
- 在遮罩元素的常态 CSS 规则里加
transform: translateZ(0)（或will-change: opacity） - 不要只加在
:hover或动画结束态，必须常驻在默认样式中，否则加速不生效 - 这个声明对现代桌面 Chrome/Firefox 无影响，但能兜住移动端兼容性缺口
- 如果遮罩上还要放文字按钮，记得加
pointer-events: none（遮罩层）和pointer-events: auto（文字层），否则点不中
真正难的不是让遮罩动起来，而是保证它动的时候不拉扯文字、不干扰焦点、不误触屏幕阅读器——所有这些都藏在定位层级、pointer-events 和伪元素限制里，而不是 opacity 数值本身。
