直接给加transition: opacity无法实现响应式图片平滑切换，因srcset仅选择资源而不触发css状态变化；需用双图叠层+class控制显隐，并精确同步加载与过渡时机。
直接给 <img> 加 transition: opacity 0.3s 并不能让响应式图片“平滑切换”，因为 srcset 切换本身不触发 CSS 状态变化，浏览器也不会为你自动淡入新图——你看到的往往是闪白、闪黑或卡顿。
为什么 srcset 切换不触发 transition
srcset 是资源选择机制，不是状态切换。浏览器在加载新图时，<img> 元素 DOM 节点没变、class 没变、CSS 属性值也没变，transition 根本没被激活。即使你监听 load 后手动改 opacity，若没控制好时机，仍会闪。
- 常见错误：写
img { transition: opacity 0.3s; }，然后仅靠img.src = ...或依赖srcset自动切换 -
srcset只影响“哪个文件被下载”，不影响“何时显示”或“如何显示” - 高 DPR 设备（如 iPhone）下，新图可能延迟几百毫秒才 ready，此时 opacity 已开始过渡，画面为空
用叠层 + class 切换实现真正可落地的响应式图片过渡
把响应式图片逻辑和动画逻辑解耦：用 srcset + sizes 确保每张图都加载最优资源；用两个 <img> 叠在一起，靠 opacity 和 z-index 控制显隐，切换时只改 class。
- HTML 中并列放两张
<img>，都带完整srcset和sizes，确保各自独立加载最优图 - CSS 中设
position: absolute; top: 0; left: 0;，当前图opacity: 1，待切图opacity: 0 - JS 切换时：先给待切图加
.active（触发 opacity 过渡），再延时0.3s移除旧图的.active（避免 z-index 冲突） - 务必加
will-change: opacity提升合成层，防低端机掉帧
示例关键片段：
<div class="image-fade"> @@##@@ @@##@@ </div>
.image-fade { position: relative; }
.image-fade img {
position: absolute; top: 0; left: 0;
opacity: 0; transition: opacity 0.3s ease-in-out;
will-change: opacity;
}
.image-fade img.active { opacity: 1; }
transition 写 all 还是具体属性？
必须写具体属性，比如 transition: opacity 0.3s，绝不能写 transition: all 0.3s。
-
all会意外捕获width、height、margin等变化，而响应式图片在视口缩放时这些值可能因重排微调，导致非预期动画抖动 - 某些浏览器对
all的硬件加速支持差，尤其在srcset触发图片重载时，容易引发 layout thrashing - 如果后续要加
transform: scale()hover 效果，也得单独声明transition: opacity 0.3s, transform 0.2s，不能混进all
移动端 touch 切换时容易忽略的坑
用户快速滑动轮播时，常出现“上一张还没 fade out，下一张又 fade in”，造成两图叠加或闪烁。
- 必须加节流：两次切换间隔至少 > 过渡时长（如 0.3s），否则 JS 频繁改 class 会让浏览器来不及完成前一次 transition
- 不要用
touchend直接触发切换，应结合touchstart+touchmove判断滑动方向和距离，再决定是否切换 - 切图后立刻调用
img.complete检查是否已加载，若为false，需监听load事件后再加.active，否则 opacity 过渡时图仍是空的
最麻烦的其实是图片加载时机和 CSS 动画节奏的对齐——它不像纯色块过渡那样可控，稍不注意，用户看到的就是半秒空白或错位叠层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
