【解決方法】イベントリスナーがイベントを発生させるのを遅らせていますか?


マウスホイールを上下に動かしてユーザーをアプリ内のさまざまなルートにナビゲートするアプリを開発しています。 また、ユーザーがスクロールする方法に対応するアニメーションもあります。下にスクロールすると、次のルートが下から初期化され、前のルートが下から終了します。その逆も同様です。

この部分は、以下のコードに従って実装するのに十分単純です（この投稿の下部にある完全な実際の動作例へのリンク）。

カスタム フック UseAppDirection.js

JavaScript
import { useState, useEffect, useContext } from "react";
import { useLocation, useNavigate } from "react-router-dom"

function useAppDirection(navDown, navUp, directionValueDown, directionValueUp) {
    const navigate = useNavigate();
    const location = useLocation();
    const { pathname } = location;
    const [isUp, setIsUp] = useState(false);



    useEffect(() => {
        function handleNavigation(e) {
            if (e.deltaY > 1) {
                setIsUp(false)
                setTimeout(() => {
                    navigate(navDown, { state: { value: directionValueDown } });
                }, 200)
            } else if (e.deltaY < 1) {
                setIsUp(true)
                setTimeout(() => {
                    navigate(navUp, { state: { value: directionValueUp } });
                }, 200)
            }
        }
        window.addEventListener("wheel", handleNavigation);

        return () => window.removeEventListener("wheel", handleNavigation);
    }, [pathname]);




    return { location, isUp }
}

export default useAppDirection

AboutMe.js

JavaScript
import React from "react";
import { motion } from "framer-motion";
import useAppDirection from "../Hooks/useAppDirection";


export default function AboutMe() {
    const { isUp, location } = useAppDirection("/work", "/skills", 1000, -1000);

    return (
        <motion.div
            className="aboutme--top"
            initial={{ opacity: 0, y: location.state.value, transition: { duration: 0.8 } }}
            animate={{ opacity: 1, y: 0, transition: { duration: 0.8 } }}
            exit={{ opacity: 0, y:  isUp ? 1300 : -1300, transition: { duration: 0.8 } }}
        >
        </motion.div >
    )
}

ただし、私が遭遇した大きな問題の 1 つは、ユーザーが 1 つの方向にスクロールし、遷移の途中で反対方向にスクロールする場合です。 両方のアニメーションが同時に発生し、2 つのコンポーネントが同時に離れたり離れたりするため、非常に見苦しくぎくしゃくしたトランジションが発生します。

私の質問は、コードを変更して、1 つのトランジションが完了したときにのみ次のトランジションを開始できるようにするにはどうすればよいですか? トランジション中はリスナーを無効にし、設定されたタイマー (トランジションが完了するまでにかかる時間は約 0.8 秒) でのみ再度有効にできます。

現在、トランジションが発生するとすぐにイベントを発生させることができますが、解決策を見つけることができません。

以下の実際の作業例：

React Ts (forked) - StackBlitz
React + TypeScript starter project
stackblitz.com

私が試したこと：

次のような多くの解決策を試しましたが、成功しませんでした。

-変数が true / false になるように変数を作成して、変数が true の場合にのみ if / else if ステートメントが起動するようにしますが、それが機能するように設計することはできません (コンポーネントが変更されたときに useEffect ステートメントに入れる場合)ルートがリセットされ、目的の効果がありません)

– 遷移時に小道具をコンポーネントに渡す

– さまざまな微調整をいじってみた

しかし、何もうまくいかないようです。ここで欠けている非常に基本的なものがあると思いますが、私の人生ではそれを解決することはできません

コメント

タイトルとURLをコピーしました