React はマウス ホイール要素のスムーズな立ち上がり効果を実装します

なぜなら、Yuan 先生のビデオでは、要素の滑らかな立ち上がり効果を実現するために vue のみが使用されているからです。vue バージョンでは、Vue.directive() を通じて命令を登録し、簡単に使用できるように v-slide-in をラベルに直接バインドできます。

同時に、react 版でも同様の操作ができるのではないかと考えたのですが、react の登録手順に関するチュートリアルが見つからず残念でした。だから、自分なりの方法で書いてください。

原則: 実際にはデモを操作するため、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;
    }
}

概要: 実装するだけで、自分で最適化および変更できます。実際には、デモを操作するだけです。デモを渡すだけです。