intersection observer比scroll事件更合适，因为它由浏览器原生异步处理、不阻塞主线程、无需手动节流和getboundingclientrect计算，且天然支持阈值触发与rootmargin偏移，精准匹配“元素进入视口即执行动画”的渐入需求。
Intersection Observer 为什么比 scroll 事件更合适
直接监听 window.onscroll 做渐入动画，容易卡顿、触发过频，且需手动节流 + 判断元素位置，兼容性差、逻辑易出错。Intersection Observer 是浏览器原生 API，自动异步回调、不阻塞主线程，且天然支持阈值控制和根容器偏移，适合做“进入视口即动画”的场景。
它不依赖滚动方向或速度，也不需要计算 getBoundingClientRect()，只要元素与根容器（默认是 viewport）的交集比例达到设定阈值，就触发回调 —— 这正是渐入动画最需要的信号。
如何用 Intersection Observer 绑定单个元素并触发动画
核心是：监听元素是否进入视口 → 满足条件时添加动画 class → 之后不再重复监听（避免反复触发）。
- 用
new IntersectionObserver()创建观察器，传入回调函数和配置项{ threshold: 0.1 }（10% 可见即触发） - 调用
observer.observe(element)开始监听目标元素 - 回调中检查
entry.isIntersecting === true，再给元素加class="fade-in" - 立即调用
observer.unobserve(element)防止二次触发（除非需要反复进出动画）
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.js-fade').forEach(el => observer.observe(el));
常见错误：动画只执行一次但页面回滚后失效
这是因误用了 unobserve() 或未处理「已动画过」的状态。如果需求是「每次进入都播放动画」（比如吸顶导航出现/消失），就不能简单 unobserve，而要靠 CSS 动画重播机制：
- 确保 CSS 中
.fade-in使用animation: fadeIn 0.4s ease-out both;，且both保证动画结束保留样式 - 在 JS 中，每次进入时先移除再添加 class：
el.classList.remove('fade-in'); el.offsetWidth; el.classList.add('fade-in');（offsetWidth强制重排，触发重播） - 不要设置
rootMargin过大（如"100px"），否则元素还没真正进入就触发，动画提前播放
CSS 动画配合要点与兼容性注意
渐入动画本质是 JS 控制时机、CSS 执行渲染，二者必须协同。关键点不在 JS 多复杂，而在 CSS 是否可中断、可重播、无副作用。
- 动画属性建议只用
opacity和transform（如translateY(20px)），避免触发布局重排 - 别用
visibility: hidden做初始隐藏 —— 它不参与交集计算，Observer 会认为元素不可见而跳过；改用opacity: 0; transform: translateY(20px); - IE 不支持 Intersection Observer，如需兼容，得 fallback 到
getBoundingClientRect()+scroll节流，但代价是性能和代码量明显上升
实际项目里，最常被忽略的是「动画 class 的初始状态是否与 Observer 触发逻辑一致」—— 元素没加初始隐藏样式，或者 Observer 监听前 class 已存在，都会导致动画不播或播两次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
