用 position: absolute 叠加图片时，opacity 过渡不生效？
常见现象是两张图叠在一起，改 opacity 值后没动画、直接跳变，甚至第二张图完全不出现。根本原因通常是父容器没设 position: relative，导致 absolute 子元素脱离文档流后，z-index 和过渡上下文失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须加
position: relative（或position: absolute/fixed），否则z-index无效，opacity过渡也常被浏览器跳过 - 两张
img都设position: absolute; top: 0; left: 0;，确保完全重叠 - 过渡必须写在要变化的元素上：比如给当前显示的图加
transition: opacity 0.3s ease;，而不是只写在父容器 - 别忘了设
opacity: 1和opacity: 0的初始/目标状态，仅靠 class 切换不够——css 不会自动推导中间态
opacity 切换时图片“闪一下”或“先缩放再淡出”？
这是浏览器对 opacity: 0 元素的渲染优化导致的：部分浏览器（尤其是旧版 safari 和某些移动端 webkit）会在 opacity: 0 时跳过绘制，导致下一帧刚切回 opacity: 1 时触发重绘，看起来像闪屏；如果还用了 transform 或 scale，叠加顺序和渲染层判断更易出错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有参与切换的
img加will-change: opacity;，提示浏览器提前准备合成层 - 避免同时操作
opacity和transform（比如scale(0.95)），除非你明确需要该动效；交叉淡入淡出只用opacity最稳 - 确保两张图尺寸一致，且父容器有明确宽高（不能靠内容撑开），否则 layout 波动会干扰过渡节奏
用 js 控制切换时，class 切换顺序写错导致两张图同时透明
典型错误是先移除当前图的 active 类（触发 opacity: 0），再添加到下一张（触发 opacity: 1），中间存在一个短暂窗口：两张图都是 opacity: 0，画面空白。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用两步法：先给下一张图加
active类（此时它已是opacity: 1），再移除当前图的类（它开始过渡到opacity: 0） - 或者用
setTimeout延迟移除旧类，但不如两步法可靠；更推荐用getComputedStyle检测过渡结束，不过对简单轮播有点重 - CSS 中定义：
.slide { opacity: 0; transition: opacity 0.4s ease; } .slide.active { opacity: 1; }，JS 只管 class，不碰内联样式
IE 或老安卓 webview 下 opacity 过渡卡顿或失效
IE10+ 支持 opacity 过渡，但必须配合 Filter: alpha(opacity=100) 才能触发硬件加速；老安卓（4.3 及之前）的 WebView 对 opacity + absolute 组合支持极差，常直接跳变或不渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如需兼容 IE10/11，加
transform: translateZ(0);强制创建新层，比filter更安全 - 老安卓设备建议降级为 visibility 切换（无动画），或用
display: none/block+setTimeout模拟淡入淡出节奏（不推荐，但比卡死强） - 务必测试真机——模拟器常掩盖渲染层问题
事情说清了就结束。最常漏掉的是父容器的 position: relative 和过渡属性写在谁身上，这两个点一错，整个效果就断在起点。