opacity动画失效主因是position与opacity同时变化触发重排，导致过渡中断；应预设position、避免混用visibility/display、写全transition属性。
opacity动画失效：定位元素突然闪现
直接原因通常是 position 和 opacity 同时变化时，浏览器触发了重排（reflow），导致过渡中断或跳帧。尤其当元素从 position: static 切换到 absolute 或 fixed 时，初始渲染阶段不参与文档流，opacity: 0 可能根本没被“看见”——过渡压根没启动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终提前声明
position（比如设为absolute），哪怕初始偏移是left: -9999px或visibility: hidden，避免状态切换引发布局抖动 - 用
opacity控制显隐，**不要**混用visibility: hidden或display: none——它们不触发过渡 - 确保过渡属性明确写全：
transition: opacity 0.3s ease, transform 0.3s ease；只写transition: all容易误触其他不可过渡属性
transition-duration 不生效：父容器阻止了继承
常见于 position: fixed 元素嵌套在 modal、drawer 等动态容器中，而该容器本身设置了 will-change: transform 或 overflow: hidden，导致子元素的 opacity 过渡被截断或降级为非合成层动画。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给动画元素加
will-change: opacity（仅在需要时，别滥用） - 检查父级是否设置了
transform: translateZ(0)或backface-visibility: hidden——这些会创建新层叠上下文，有时意外隔离了过渡链 - 用 Chrome DevTools 的 **Layers** 面板确认 opacity 动画是否跑在合成层；如果显示为“Paint”，说明它在主线程重绘，卡顿风险高
z-index 与 opacity 动画冲突：半透明层遮挡点击
当多个 position: absolute 元素叠加、且都带 opacity: 0.9 动画时，视觉上看似分层，但实际事件穿透可能异常：底层元素接收不到 click，或鼠标 hover 错位。这不是 bug，而是半透明元素仍参与事件捕获，且 z-index 在 opacity
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若某层只需视觉过渡、不需交互，加
pointer-events: none；需要交互时，确保其z-index明确高于相邻层，且不依赖 opacity 值来“排序” - 避免对
opacity做精细控制（如0.47），浏览器对 subpixel opacity 渲染不一致，容易造成跨设备点击热区偏移 - 测试时用真机或模拟 touch 事件，因为桌面端 hover + opacity 组合在移动端无对应行为
IE/Edge Legacy 下 opacity 过渡完全不动
老版 Edge（≤18）和 IE11 对 transition + opacity 支持极弱：要么不触发，要么只执行一次。它们把 opacity 当作“离散属性”，不认为它可插值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须兼容时，改用
filter: alpha(opacity=0)+transition: filter（IE专供），但注意filter会触发重绘，性能差 - 更稳妥的是降级为 JS 控制：用
requestAnimationFrame手动更新style.opacity，避开 CSS 过渡引擎缺陷 - 现代项目建议直接忽略 IE，但若无法绕开，至少加
@supports (transition: opacity 0.1s)做特性检测，避免样式污染
opacity 和 position 配合最麻烦的地方不在写法，而在「何时开始动画」——它高度依赖渲染管线阶段。很多人调了半天 easing，其实问题出在元素还没被 layout 就进了 paint，或者刚进 composite 层就被父容器裁剪掉了。动手前先打开 DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “FPS meter”，看第一帧到底卡在哪一步。
