intersectionobserver 是监听图片淡入的最佳方案，需设 threshold: 0.1、复用实例、仅切 class；css 中 transition 必须写在初始类，opacity 从 0→1 触发过渡，避免 visibility 和 will-change 引发布局抖动与卡顿。
用 IntersectionObserver 监听图片是否进入视口
直接监听 scroll 事件做淡入，容易卡顿、触发过频、iOS 上掉帧严重。现代浏览器都支持 IntersectionObserver，它是专为这类“可见性判断”设计的 API，不阻塞主线程，自动节流，连 iOS Safari 13.4+ 都稳定可用。
关键点不是“能不能用”，而是怎么配参数才不漏触发、不误触发：
-
threshold: 0.1是最实用的值——元素只要 10% 进入视口就启动动画；设成0容易在快速滚动时跳过 - 不要给每个图片都 new 一个 observer 实例，复用同一个实例观察所有
.fade-img元素，否则内存和性能双吃紧 - 回调里只做 class 切换，别直接改
style.opacity，否则 transition 失效或动画断层
CSS 动画类必须写对，否则淡入闪退或不动
常见错误是把 transition 写在 .is-visible 里，或者漏掉初始状态声明。浏览器不会凭空开始过渡，它只响应「属性值变化」。
正确结构是：
- 初始类（如
.fade-img）必须含：opacity: 0+transition: opacity 0.6s ease - 激活类（如
.fade-img.is-visible）只需写opacity: 1，不重复写 transition - 如果用
@keyframes，animation-fill-mode: forwards必须加上，否则动画一结束立刻回退到opacity: 0
别用 visibility: hidden 替代 opacity: 0——它不支持过渡，且会让元素脱离文档流，导致布局跳变。
图片淡入时文字抖动？大概率是字体没加载完
不是动画写错了，是渲染上下文不稳定。自定义字体加载前，浏览器用系统字体撑开容器；等 Web Font 加载完成，又重排一次，造成行高突变、文字跳动。
解决方法不在动画本身，而在字体控制：
- 给图片容器加固定
line-height和min-height，锁住高度预期 - Web Font 的
@font-face中加font-display: swap或optional，避免阻塞渲染 - 慎用
will-change: transform——移动端某些 WebView 会因此创建额外合成层，反而卡顿
移动端要注意 observer 的兼容性边界
iOS Safari 13.4+ 支持完整 IntersectionObserver，但更早版本（如 iOS 12）不支持 threshold 数组或 rootMargin 的负值。如果你仍需兼容旧版，得 fallback 到 getBoundingClientRect() + 节流 scroll 监听，但务必加 requestIdleCallback 包裹计算逻辑，否则滚动卡顿明显。
另外，部分 Android WebView 对 isIntersecting 返回有延迟，建议在回调里加个简单防抖：比如检查 entry.intersectionRatio > 0.05 再执行 class 切换，比只依赖 isIntersecting 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
