js实现元素根据鼠标滚轮滚动向左右上下滑动着从模糊到清楚显示出来

html代码

<div ref={test} id="animatedElement" className="not-animated">
        <div style={{width:"100px",height:"50px",backgroundColor:"red"}}>
        </div>
</div>

JS代码

const test = useRef(null)
  // 监听滚轮事件
  useEffect(() => {
    const handleScrollaa = () => {
      const scrollTop1 = document.documentElement.scrollTop || document.body.scrollTop;
      const h = test.current;
      const triggerPoint = window.innerHeight
      if (scrollTop1 > triggerPoint * 0.3) {
        // 触发动画，通过添加 animate 类
        console.log(32135456434687)

       (headerLogo2 as HTMLElement).style.animation = `ROW3 2s forwards`;
      }
      else if(scrollTop1 < triggerPoint * 0.3){
        h.style.animation=""
        h.style.opacity="0"
      }
    };

    window.addEventListener('scroll', handleScrollaa);
    // 组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('scroll', handleScrollaa);
    };
  }, []);

CSS代码（实现从左到右滑动出来，并且由模糊到清楚的展现）

@keyframes ROW3 {
  0% {
    transform: translateX(-100%); /* 动画开始时，图片在容器外部 */
    filter: blur(30px);  /*模糊属性*/
    opacity:0; /*opacity: 0 隐藏  1 显示 */
  }
  100% {
    transform: translateX(0) rotate(1turn) ; /* 动画结束时，图片移动到容器内部 rotate(1turn)是内容旋转，随着移动而滚动 */
    filter: blur(0);
    opacity:1;
  }}