图片淡入需确保加载完成，否则闪屏；正确做法是用img.complete或load事件判断，transition必须写在基础样式中，动态切换需分三步控制opacity和src，@keyframes适合首屏自动入场但缺乏交互控制。
淡入前必须确保图片已加载完成，否则会闪屏
直接给 img 设 opacity: 0 再加 transition，但没等图片加载完就切到 opacity: 1，结果是先看到空白区域淡入，等图加载完再“啪”一下出现内容——这就是典型闪屏。根本原因在于浏览器渲染时，img 的尺寸和内容还没就绪。
正确做法是：只在图片真正可绘制后才触发动画。优先用 img.complete 判断是否已缓存，否则监听 load 事件：
-
img.complete为true→ 立即添加显示类（如.loaded） -
img.complete为false→ 绑定load事件，事件触发后再加类 - 懒加载场景下，还要等
IntersectionObserver触发后才开始监听load，避免过早绑定无效事件
transition 必须写在基础样式里，不能只写在 .show 类中
很多人把 transition: opacity 0.4s 只放在 .show 类里，结果动画不生效。因为 transition 属性本身是“动态添加”的，浏览器无法补全从 0→1 的过渡过程。
正确写法是：基础选择器（如 img 或具体 class）一开始就声明 transition：
img {
opacity: 0;
transition: opacity 0.4s ease-out;
}
img.loaded {
opacity: 1;
}
这样浏览器在计算样式时就能捕获状态变化，触发硬件加速的合成帧过渡。
- 千万别写
transition: all 0.4s—— 会意外触发margin、color等重排属性，卡顿且不可控 - 如果图片容器有
aspect-ratio或固定宽高，能进一步避免 layout shift - 移动端 Safari 对纯
opacity过渡较敏感，建议搭配will-change: opacity提前提示合成层
动态切换图片时，要分三步控制 opacity 和 src
单纯改 src 会导致瞬间空白，即使有 transition 也盖不住这个间隙。必须把“旧图淡出 → 换 src → 新图淡入”拆成明确时序。
关键点是：淡出和淡入不能靠同一个 class 控制，得用两个独立状态类：
.img-fade {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.img-fade.fading {
opacity: 0;
}
.img-fade.loaded {
opacity: 1;
}
- 点击切换时，先加
fading类 → 旧图渐隐 - 等
setTimeout延迟（时长 = transition duration）→ 确保淡出完成 - 此时再换
src，并移除fading、加loaded→ 新图加载后自动淡入 - 若新图已缓存（
img.complete），可跳过等待，直接加loaded
@keyframes 方案适合首屏自动入场，但不能 runtime 控制
页面一打开就要动的图片（比如 banner 主图），用 @keyframes + animation 更可靠。它不依赖 JS 触发时机，只要元素挂载就播。
但注意两点：动画必须写在初始 class 里，且必须带 forwards：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.hero-img {
opacity: 0;
animation: fadeIn 0.6s ease-out forwards;
}
- 删掉
forwards？动画播完立刻闪回opacity: 0 - 把 animation 写在
body上？整页重绘，滚动卡顿风险高 - from 值必须和元素当前 opacity 一致，否则起点错位——所以初始必须设
opacity: 0
真正容易被忽略的是：这种方案没法暂停、反转或响应用户交互。需要控制节奏或手动触发时，还是得回到 transition + class 路线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
