react实现鼠标滑轮元素平滑上升效果

因为袁老师视频的里面的只是使用vue实现了元素平滑上升一个效果。vue版本是可以通过Vue.directive()注册指令,然后可以在标签上面直接绑定v-slide-in就可以简单使用。

同时我想着是否react版本是否也是一样的操作，但是很失望，找不到react注册指令的一些教程。所以干脆用自己的方法写一个。

原理：实际上就是操作demo，我们可以通过ref获得当前节点然后传递过去给这个方法进行一个调用

首先创建一个vSlideIn.js文件（和视频代码一样）

//动画运动距离
const DISTANCE = 300;
//动画时间
const DURATION = 1000;
//动画对象
const animationMap = new WeakMap()
//监听重叠
const ob = new IntersectionObserver(entries=>{
    for(const entry of entries){
        if(entry.isIntersecting){
            console.log(entry.target)
            const animation = animationMap.get(entry.target)
            //播放
            animation.play();
            //取消监听
            ob.unobserve(entry.target)
        }
    }
})
function isBelowViewport(el){
    const rect = el.getBoundingClientRect()
    return rect.top > window.innerHeight
}
export default  {
    mounted(el) {
        if(!isBelowViewport(el)){
            return
        }
        const animation = el.animate([
            {
                transform:`translateY(${DISTANCE}px)`,
                opacity:0.5
            },
            {
                transform:`translateY(0)`,
                opacity:1
            }
        ],{
            duration:DURATION,
            easing:'ease'
        });
        animation.pause()
        animationMap.set(el,animation)
        ob.observe(el)
    },
    //卸载
    unmounted(el:any) {
        ob.unobserve(el)
    },
};

我的jsx代码

import { useEffect, useRef, useState } from "react";
//css自己加
import styled from "./HomePage.module.scss";
//注意自己的文件路径
import vslidein from "@/utils/vSlideIn";

const vslideins = vslidein.mounted;
//主文件
function HomePage() {
  const refs1 = useRef(null);
  const refs2 = useRef(null);
  const refs3 = useRef(null);
  const refs4 = useRef(null);
  useEffect(() => {
    //异步一下
    setTimeout(() => {
      //直接传refs1没用的会报错误,refs1.current才能拿到真正的demo
      //这块和定义都可以用循环实现，没必要写这么多代码，你们自己改良即可
      vslideins(refs1.current);
      vslideins(refs2.current);
      vslideins(refs3.current);
      vslideins(refs4.current);
    });
  }, [refs1,refs2,refs3,refs4]);  
  return (
    <>
      <div className={styled.subject}>
        <div ref={refs1} className={styled.colorA}>
            1
        </div>
        <div ref={refs2} className={styled.colorB}>
            2
         </div>
        <div ref={refs3} className={styled.colorC}>
            3
        </div>
        <div ref={refs4} className={styled.colorD}>
            4
        </div>
      </div>
    </>
  );
}
export default HomePage;

算了我直接把饭喂你嘴里面，css

.subject {
    div{
      width: 100vw;
      height: 100vh;
    }
    .colorA{
        background:#1c1e53;
    }
     .colorB{
        background:#fcd980;
    }
     .colorC{
        background:#f4f6fc;
    }
     .colorD{
        background:#fde6b2;
    }
}

总结：简单的实现一下，你们可以自己优化修改一下。实际上就是操作demo，把demo传进去即可