滚动页面触发相应位置动画 ---react

需要实现的效果：（滚动到内容区域触发）

第一段内容移动效果
第二段内容淡入
第三段内容缩放

实现思路

 滚动过的距离+当前窗口的高度>元素到顶部窗口的距离  ===>则触发动画

整体代码

import React,{useRef,useEffect,useState} from 'react';// 此函数用于获取一个元素到最外层窗口的距离
// 接收两个参数
// obg---> Dom元素
// direction----->方向  top|bottom|left|right
const offset = (obj, direction) => {//将top,left首字母大写,并拼接成offsetTop,offsetLeftvar offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);    var realNum = obj[offsetDir];var positionParent = obj.offsetParent;  //获取上一级定位元素对象while(positionParent != null){realNum += positionParent[offsetDir];positionParent = positionParent.offsetParent;}return realNum;
}const View = () => {let text_area1=useRef()let text_area2=useRef()let text_area3 = useRef()let [scrollH, setscrollH] = useState(0)let [domTop, setDomTop] = useState({Dom1_offT:0,Dom2_offT:0,Dom3_offT:0,})const init=()=>{let Dom1_offT = offset(text_area1.current, 'top')let Dom2_offT = offset(text_area2.current, 'top')let Dom3_offT = offset(text_area3.current, 'top')setDomTop({Dom1_offT,Dom2_offT,Dom3_offT})window.onscroll = () => {let currentH = document.documentElement.clientHeightlet scrollH = document.documentElement.scrollTopsetscrollH(scrollH+currentH)}}useEffect(() => {init()}, [])return (<div className="demo1_container"><div ref={text_area1} className={scrollH > domTop.Dom1_offT? 'text_area1 a_1' : 'text_area1'}><ul>{new Array(10).fill(0).map((item, index) => {return (<li key={index}>这是一段内容{index}</li>)})}</ul></div><div ref={text_area2}  className={scrollH>domTop.Dom2_offT?'text_area2 a_2':'text_area2' }><ul>{new Array(10).fill(0).map((item, index) => {return (<li key={index+10}>这是一段内容{index}</li>)})}</ul></div><div ref={text_area3}  className={scrollH>domTop.Dom3_offT?'text_area3 a_3':'text_area3' }><ul>{new Array(10).fill(0).map((item, index) => {return (<li key={index+20}>这是一段内容{index}</li>)})}</ul></div></div>       )
}export default View

样式文件

.demo1_container {div {margin-top: 700px;}
}.a_1 {animation: A 1s 1;
}.a_2 {animation: B 1s 1;
}.a_3 {animation: C 1s 1;
}@keyframes A {0% {transform: translate(20%, 20%);}100% {transform: translate(0);}
}
@keyframes B {0% {opacity: 0;}100% {opacity: 1;}
}@keyframes C {0% {transform: scale(0.8);}100% {transform: scale(1);}
}