opacity动画卡顿或闪烁的直接原因是未开启硬件加速或触发重排；需确保无干扰层叠上下文、避免display操作、显式声明transition属性、处理pointer-events及z-index层级问题，并注意IE11/Safari兼容性限制。
opacity 动画卡顿或闪烁，为什么加了 transition 还不生效
直接原因通常是元素没有开启硬件加速，或者触发了重排。opacity 本身是可被 GPU 加速的属性，但浏览器在某些条件下（比如父容器有 transform: none、元素处于文档流中且有其他层叠上下文干扰）会退回到 CPU 渲染，导致掉帧或闪烁。
- 确保目标元素没有意外的
will-change: auto或未声明will-change；可显式加will-change: opacity（仅在动画频繁时用，避免滥用） - 避免同时对
opacity和display操作——display: none会直接销毁渲染树，transition 失效；改用visibility: hidden+opacity: 0 - 不要在
:hover中写多条 transition，例如transition: opacity 0.3s, transform 0.3s，若只动 opacity，就只写它，减少浏览器解析开销 - 检查是否被
overflow: hidden的父容器裁剪，有时半透明叠加会触发额外合成层，引发闪烁；可尝试给父容器加transform: translateZ(0)强制新建层
IE11 或旧版 Safari 下 opacity 过渡完全不动
不是 bug，是兼容性事实：IE11 支持 opacity，但不支持对它的 CSS transition（仅支持滤镜类过渡，如 filter: alpha(opacity=100)）；Safari 9 及更早版本对 transition 的 property 解析较弱，遇到简写 transition: all 0.3s 容易忽略 opacity。
- 明确写出过渡属性：
transition: opacity 0.3s ease，别用all - IE11 如必须支持淡入，得降级用 JS 控制 class 切换 +
setTimeout手动改opacity值（每 16ms 增减 0.05），或用filter: alpha(opacity=XX)配合 JS - 移动端 Safari（iOS 9.3 之前）对
opacitytransition 有渲染延迟，可加backface-visibility: hidden强制启用合成
opacity 从 0 → 1 淡入后，点击区域不可用
常见于淡入弹窗、提示框等场景：视觉上显示了，但 opacity: 0 时元素仍占布局、仍响应事件；而 opacity: 0 本身**不阻止 pointer-events**，所以如果没手动关，用户可能点到“看不见却存在”的元素上。
- 淡入前（opacity 0 阶段）务必加
pointer-events: none；淡入完成后再移除或设为auto - 不要依赖
visibility: hidden替代 opacity 控制——它虽隐藏但默认仍禁用交互，但和 opacity 行为不一致，混用容易出错 - 如果用 JS 控制，建议统一用 class 控制状态：
.fade-enter（opacity 0 + pointer-events none）、.fade-enter-active（transition + opacity 1 + pointer-events auto）
多个 opacity 动画叠加时 z-index 错乱
opacity 小于 1 的元素会创建新的层叠上下文（stacking context），导致其子元素的 z-index 相对于父级生效，而非全局文档流。结果就是：A 弹窗 opacity: 0.99，B 弹窗 opacity: 1，但 B 却被 A 的子内容盖住。
立即学习“前端免费学习笔记（深入）”；
- 检查是否无意中给中间容器加了
opacity: 0.x；能用rgba()调背景色透明就别动父级 opacity - 需要精确控制层级时，优先用
z-index+position，而不是靠 opacity “压”层级 - 调试技巧：Chrome DevTools 的 Layers 面板里勾选 “Paint flashing”，能看到哪些元素因 opacity 创建了新合成层
