IntersectionObserver怎么判断元素进入视口
它不靠监听页面滚动事件，而是让浏览器在元素真正接近或进入视口时主动通知你——这意味着更少的重绘、更低的性能开销，尤其适合长列表或懒加载动画场景。
关键点在于：必须手动给目标元素添加一个监听器实例，并指定threshold（触发阈值），比如0.1表示元素10%进入视口就触发回调；设为[0, 0.5, 1]则会在0%、50%、100%三个临界点各触发一次。
常见错误现象：IntersectionObserver初始化后没调用observe()方法，或者监听的DOM节点还没挂载到页面上就去observe()，结果回调永远不执行。
- 确保目标元素已存在于DOM中，再调用
observer.observe(target) - 如果元素是动态插入的（比如React/Vue组件渲染后），把
observe()放在useEffect或mounted钩子里 -
root参数默认是浏览器视口，若想以某个容器为“视口”，需传入该容器DOM节点，且该容器必须有overflow: hidden/auto/scroll
怎么用CSS类名配合触发动画
纯CSS动画（@keyframes）本身不会自动播放，得靠添加类名来激活。所以IntersectionObserver的任务只是“开关”——进视口加类，出视口删类（或反之）。
立即学习“前端免费学习笔记（深入）”；
注意：别直接在animate属性上写animation-play-state来控制启停，它不支持transition，也不响应class切换；正确做法是定义两套class，比如.fade-in带animation，.fade-in--active只负责触发（或干脆用.is-visible这种语义化命名）。
示例：
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s, transform 0.4s;
}
.fade-in.is-visible {
opacity: 1;
transform: translateY(0);
}
- 动画效果优先用
transform和opacity，避免触发布局重排（reflow） - 不要依赖
animation-delay做滚动触发逻辑，它无法和滚动位置同步 - 如果需要“只播放一次”，观察到
isIntersecting === true后立即调用unobserve()，否则反复进出视口会重复触发
为什么有时动画不触发或闪一下就没了
最常见原因是：元素刚进入视口时样式还没准备好，或者类名添加太早（比如在isIntersecting为true瞬间就加class），但此时元素可能还在计算布局、字体未加载、甚至父容器高度塌陷。
另一个隐蔽坑是：某些CSS重置库（如Normalize.css）或框架（如Tailwind）会把body设成overflow-x: hidden，导致IntersectionObserver误判根容器尺寸，从而漏掉触发。
- 检查
entry.boundingClientRect和entry.rootBounds是否合理，调试时打印它们能快速定位“为何没触发” - 对图片或字体依赖强的模块，可加
setTimeout延后1帧再加class（requestAnimationFrame更稳妥） - 移动端Safari对
IntersectionObserver支持较老，iOS scroll +getBoundingClientRect()轮询（但仅限兜底）
要不要监听离开视口并反向动画
可以，但多数场景没必要。用户滚动离开后还执行“淡出”动画，反而干扰浏览节奏；除非是吸顶导航、悬浮按钮这类需要明确状态反馈的UI。
如果真要支持反向，别用同一个class来回切换，容易冲突。建议拆成两个独立状态：.is-entered和.is-exited，CSS里分别定义入场/退场动画，再用transition衔接。
- 退场动画通常比入场慢一点（比如
0.6s），避免视觉突兀 - 一旦加了
.is-exited，记得在动画结束后用animationend事件清理class，防止残留影响后续逻辑 - 慎用
will-change: transform，它可能让部分安卓WebView卡顿，只在必要动画元素上加
