闪现主因是 transition 未在 opacity 变化时生效或触发重排。需将 transition 写在初始状态而非触发态，避免混用 display 等引发重排的属性，可用 visibility 替代，必要时启用 will-change 或 transform 硬件加速，并防止 JS 同步样式读取打断过渡。
闪现通常是因为 transition 没有正确绑定到 opacity，或触发时发生了重排（reflow）导致样式瞬间跳变。关键不是“加了 transition”，而是它是否在 opacity 变化时被真正生效。
确认 transition 写在正确的元素和状态上
transition 必须写在 初始状态（比如默认 class 或 :not(.active)） 中，而不是只写在 hover / active / show 等触发态里。否则 浏览器 首次进入该状态时，opacity 会立即跳变，再开始过渡。
- ✅ 正确写法：.box {opacity: 0; transition: opacity 0.3s ease;} .box.show {opacity: 1;}
- ❌ 错误写法：.box {opacity: 0;} .box.show {opacity: 1; transition: opacity 0.3s ease;}（transition 晚了一步，首帧无过渡）
避免触发 layout（重排）干扰过渡
如果 opacity 切换的同时还修改了 display、visibility、height、margin 等影响布局的属性，浏览器可能中断 opacity 过渡，造成视觉闪动或卡顿。
- 用 visibility: hidden / visible 替代 display: none / block（visibility 不触发重排，且可与 opacity 过渡共存）
- 确保元素有明确的尺寸和定位（如 position: absolute 或 fixed），避免因内容变化导致 回流
- 若需隐藏后释放空间，可在 transition 结束后（用 transitionend 事件）再设 display: none
启用 硬件加速 提升渲染稳定性
某些浏览器（尤其旧版 Safari 或移动端）对纯 opacity 过渡优化不足，添加 will-change 或 transform 可激活 GPU 加速，减少闪动。
立即学习 “ 前端免费学习笔记（深入）”；
- 简单安全的做法：.box {will-change: opacity;}（仅在需要过渡的元素上加，避免滥用）
- 兼容性更强的写法：.box {transform: translateZ(0); }（触发硬件加速，不影响布局）
- 注意：不要对大量元素同时加 will-change，可能反而降低性能
检查是否有 JavaScript 强制同步样式读取
JS 中若在设置 opacity 前读取 offsetHeight、getComputedStyle 等，会强制浏览器同步计算样式并刷新布局，打断过渡流程。
- 避免在 class 切换前后立即读取布局信息
- 把 class 切换和后续操作拆开，例如用 setTimeout(fn, 0) 或 Promise.resolve().then(…) 延迟到下一帧
