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

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

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

实现思路

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

整体代码

import React,{useRef,useEffect,useState} from 'react';



// 此函数用于获取一个元素到最外层窗口的距离
// 接收两个参数
// obg---> Dom元素
// direction----->方向  top|bottom|left|right
const offset = (obj, direction) => {
      //将top,left首字母大写,并拼接成offsetTop,offsetLeft
      var 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.clientHeight
            let scrollH = document.documentElement.scrollTop
            setscrollH(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);
	}
}