react+IntersectionObserver实现页面丝滑帧动画

实现效果：

加入帧动画前：

普通的静态页面

加入帧动画后：

可以看到，加入帧动画后，页面效果还是比较丝滑的。

技术实现

加入animation动画类

先用 **scss **定义三种动画类：

.withAnimation {.fade1 {animation: fadeInDown1 1s;}.fade2 {animation: fadeInDown2 1.25s;}.fade3 {animation: fadeInDown2 1.5s;}
}@keyframes fadeInDown1 {0% {transform: translate3d(0, 40px, 0);opacity: 0;}22% {transform: translate3d(0, 40px, 0);opacity: 0;}100% {-webkit-transform: none;transform: none;opacity: 1;}
}
@keyframes fadeInDown2 {0% {transform: translate3d(0, 40px, 0);opacity: 0;}44% {transform: translate3d(0, 40px, 0);opacity: 0;}100% {-webkit-transform: none;transform: none;opacity: 1;}
}
@keyframes fadeInDown3 {0% {transform: translate3d(0, 40px, 0);opacity: 0;}66% {transform: translate3d(0, 40px, 0);opacity: 0;}100% {-webkit-transform: none;transform: none;opacity: 1;
}

注意：.fade类前面需要有.withAnimation，作为接下来实现帧动画，添加.withAnimation .fade类帧动画的工具。

加入IntersectionObserver监听

IntersectionObserver

先简单过一下IntersectionObserver的使用：

var observer = new IntersectionObserver(callback,options);

IntersectionObserver支持两个参数：

1. callback是当被监听元素的可见性变化时，触发的回调函数
2. options是一个配置参数，可选，有默认的属性值

//初始化一个实例
var observer = new IntersectionObserver(changes => {for (const change of changes) {console.log(change.time);// Timestamp when the change occurred// 当可视状态变化时，状态发送改变的时间戳// 对比时间为，实例化的时间，// 比如，值为1000时，表示在IntersectionObserver实例化的1秒钟之后，触发该元素的可视性变化console.log(change.rootBounds);// Unclipped area of root// 根元素的矩形区域信息，即为getBoundingClientRect方法返回的值console.log(change.boundingClientRect);// target.boundingClientRect()// 目标元素的矩形区域的信息console.log(change.intersectionRect);// boundingClientRect, clipped by its containing block ancestors,// and intersected with rootBounds// 目标元素与视口（或根元素）的交叉区域的信息console.log(change.intersectionRatio);// Ratio of intersectionRect area to boundingClientRect area// 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，// 完全可见时为1，完全不可见时小于等于0console.log(change.target);// the Element target// 被观察的目标元素，是一个 DOM 节点对象// 当前可视区域正在变化的元素}
}, {});// Watch for intersection events on a specific target Element.
// 对元素target添加监听，当target元素变化时，就会触发上述的回调
observer.observe(target);// Stop watching for intersection events on a specific target Element.
// 移除一个监听，移除之后，target元素的可视区域变化，将不再触发前面的回调函数
observer.unobserve(target);// Stop observing threshold events on all target elements.
// 停止所有的监听
observer.disconnect();

实现

页面组件中加入IntersectionObserver

  useEffect(() => {const options = {rootMargin: '0px',threshold: 0.2 // 指定交叉比例为 20% 时触发回调函数};const observer = new IntersectionObserver(([entry]) => {// ...}, options);}, []);

监听dom元素的进入，添加对应class

fadeClass类的添加

• 确保父元素加入了fadeClass类，便于后续对加动画的dom元素进行锁定
• 子元素添加对应的fade动画类

      <div className={cName([styles.rootFront,'fadeClass'])}><p className={cName([styles.text1, styles.fade1])}>123</p><p className={cName([styles.text2, styles.fade2])}>123</p><p className={cName([styles.text3, styles.fade3])}>123</p></div>

cName()是classnames中给dom元素添加多个class的方法，也可以用其他方法实现。

• 引入：“import cName from ‘classnames’”
• 依赖：npm i classnames

IntersectionObserver监听fadeClass元素的进入

  useEffect(() => {const elements = document.querySelectorAll('.fadeClass');const options = {rootMargin: '0px',threshold: 0.2 // 指定交叉比例为 20% 时触发回调函数};const observer = new IntersectionObserver(([entry]) => {if (entry.isIntersecting) {entry.target.classList.add(styles.withAnimation);}// 进入时添加withAnimation类}, options);elements.forEach((dom) => {observer.observe(dom);//每个元素，添加聆听事件});}, []);

不出意外，到这来就基本实现完成了，其他动画效果实现类似。