闪现主因是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(...) 延迟到下一帧
