intersectionobserver 通过浏览器原生异步机制监听元素进入视口，开销低、精度高；需正确配置 threshold（如 [0, 0.1]）、确保元素已挂载且可见、配合 css class 控制动画触发，并优化性能避免卡顿。
IntersectionObserver 怎么监听元素进入视口
它不是靠 window.onscroll 拼性能，而是浏览器原生的异步监听机制，开销极低。只要元素第一次出现在可视区域（哪怕只露出 1px），IntersectionObserver 就能触发回调。
常见错误是没设 threshold，导致动画只在完全进入时才触发，用户已经滑过去了才动——实际多数场景该设成 [0, 0.1] 这类小数值，让动画提前“预热”。
- 必须传入一个回调函数和配置对象，
root一般为null（监听视口），不要乱设为某个容器否则容易监听失效 -
threshold推荐用数组：比如[0, 0.2, 0.5, 1]，可捕获多个进入阶段，但动画通常只关心isIntersecting === true的首次触发 - 记得调用
observer.observe(element)，漏掉这句等于写了没用
CSS 动画怎么配合 IntersectionObserver 触发
别用 animation: name 0.6s ease-out 直接写在元素上——那样页面一加载就播完了。得靠 JS 控制 class 切换，让 CSS 只在进入后才生效。
核心逻辑就一句：element.classList.add('animate-in')，然后 CSS 里定义 .animate-in 的 animation 属性。这样动画只在 JS 主动加 class 时启动，可控、可复用、不重复播放。
- 动画样式建议用
transform+opacity，避免触发布局重排（margin、height等会卡顿） - 加完 class 后别忘了在动画结束时清理：用
element.addEventListener('animationend', ...)移除 class 或标记状态，防止反复监听反复加 - 如果元素可能多次进出视口，要判断是否已动画过，用
element.dataset.animated = 'true'比单纯查 class 更可靠
为什么加了 observer 却没触发动画
90% 是因为元素还没挂载到 DOM 就执行了 observe()，或者元素被 display: none / visibility: hidden 挡住了——IntersectionObserver 不会监听不可见元素。
另一个高频坑：父容器有 overflow: hidden 且未设 position: relative，会导致子元素的“视口”计算异常，observer 认为它永远不在视区内。
- 确保
observe()调用时机在元素真实存在于 DOM 后，Vue/React 中推荐在mounted或useEffect里执行 - 检查目标元素是否被
opacity: 0或transform: scale(0)隐藏——这些不影响 intersection 判断，但可能让你误以为“没进” - 用 Chrome DevTools 的 Rendering 面板打开 “Paint Flashing”，看元素是否真被渲染出来了
移动端滚动动画卡顿或跳帧怎么办
不是 CSS 写得不够炫，而是动画本身在主线程跑，又叠加了 JS 回调处理，很容易丢帧。关键解法是把动画逻辑完全交给合成器（compositor），只动 transform 和 opacity，并加 will-change: transform 提前提示浏览器。
另外，IntersectionObserver 的 rootMargin 得加大：移动端滚动快，'0px 0px 200px 0px' 比默认值更稳妥，让动画提前 200px 开始准备。
- 禁用
animation-fill-mode: forwards后的样式残留问题：它会让元素停在动画最后一帧，影响后续交互，建议动画结束后手动 reset 关键属性 - 不要在
callback里做复杂计算或 DOM 查询，只做 class 切换和简单标记，重逻辑扔到requestIdleCallback里 - Safari 对
IntersectionObserver支持较弱，iOS 12.2+ 才稳定，老版本需降级为 scroll + getBoundingClientRect
真正难的不是写出第一个滚动动画，而是让几十个动画元素同时进出时，不抢主线程、不误触发、不累积延迟——这些细节全藏在 threshold 设置、class 控制节奏和 will-change 的取舍里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
