intersection observer 实现滚动渐入动画的核心是用其判断元素是否进入视口，而非监听 scroll 事件；需设 threshold、及时 unobserve/disconnect、用 css class 控制过渡、标记状态防重复触发，并在 react 中正确使用 useref 和 useeffect 管理实例与清理。
用 Intersection Observer 监听元素进入视口
滚动渐入动画的核心不是监听 window.onscroll，而是用 IntersectionObserver 判断元素是否进入可视区域——它性能更好、不触发重排、原生支持阈值和根容器控制。
常见错误是手动计算 getBoundingClientRect() 配合 scroll 事件，导致卡顿或多次重复触发；更糟的是在 React/Vue 中没做防抖或清理，造成内存泄漏。
- 初始化时传入
{ threshold: 0.1 }表示元素 10% 进入视口就触发，比0更早响应，体验更自然 - 务必调用
observer.unobserve(el)或在组件卸载时observer.disconnect()，否则观察器持续驻留 - 不要在
callback里直接操作 DOM 动画属性（如el.style.opacity），优先用 CSS class 切换，便于复用过渡效果
CSS 中定义渐入的 transition 和初始状态
动画效果由 CSS 控制，JavaScript 只负责开关 class。关键在于把「隐藏态」和「可见态」分离，且初始隐藏必须是可被过渡的属性值（比如 opacity: 0 而不是 display: none）。
容易忽略的是 transform 的初始偏移：只靠 opacity 渐入会显得“平”，加一点 translateY(20px) 再配合 transition: opacity 0.4s ease, transform 0.4s ease，视觉更轻盈。
- 必须给目标元素设置
transition，且属性名要和后续 JS 添加的 class 中实际变更的属性完全一致（大小写、连字符都不能错） - 避免使用
transition: all，它会过渡所有可变属性，可能意外触发布局抖动 - 如果元素本身有内联
style（比如 SSR 渲染或框架注入），会覆盖 CSS 中的transition，需用!important或改用scoped等机制确保生效
如何让动画只触发一次，且兼容低版本浏览器
IntersectionObserver 在 Safari 12.1+ 和 Chrome 76+ 原生支持，IE 完全不支持。但「只触发一次」这个需求，不能只靠 unobserve，还要结合状态标记，防止因滚动反复进出导致重复播放。
- 给每个目标元素加一个 data 属性，如
data-animated="false"，在回调中先检查再更新，避免多次执行el.classList.add("animate-in") - 对 IE 或旧 Safari，降级方案不是 polyfill（
intersection-observerpolyfill 有兼容性坑），而是直接 fallback 到「页面加载后全部渐入」：document.addEventListener("DOMContentLoaded", () => el.classList.add("animate-in")) - 如果页面有动态插入内容（如分页加载），记得对新节点重新调用
observer.observe(newEl)，不能只在初始化时 observe 一次
React 中使用 useRef + useEffect 的典型写法
函数组件里不能把 ref 直接传给 observe，因为 ref.current 可能为 null；也不能在每次渲染都新建 IntersectionObserver 实例，会造成资源浪费。
正确做法是用 useRef 存 observer 实例，useEffect 初始化并清理，再在 useEffect 依赖数组里监听 ref 变化。
const ref = useRef(null);
const observerRef = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting && ref.current) {
ref.current.classList.add("animate-in");
observer.unobserve(ref.current);
}
},
{ threshold: 0.1 }
);
observerRef.current = observer;
if (ref.current) observer.observe(ref.current);
return () => {
if (observerRef.current) observerRef.current.disconnect();
};
}, []);
return <div ref="{ref}">...</div>;
注意：不要把 ref 放进 useEffect 依赖数组——它不会变；也不要漏掉 if (ref.current) 判断，服务端渲染时 ref 可能还没挂载。
真正难处理的是列表项动画顺序和 stagger 效果，那得引入额外计时逻辑或 setTimeout 批量控制，已经超出滚动触发的基本范畴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
