【React✖️FramerMotion】画面を遷移させたい！

研修中の開発備忘録です！

はじめに！

import { motion, AnimatePresence } from "framer-motion";
import { useLocation } from "react-router-dom";

• 事前準備は大事

今回のメイン

const RouteWrapper: React.FC = () => {
    const location = useLocation();

    return (
      <AnimatePresence>
        <motion.div
          key={location.pathname}
          initial={{ opacity: 0.8, scaleX: 1 }}
          animate={{ opacity: 1.0, scaleX: 0 }} // X軸方向に縮小
          exit={{ opacity: 0.5, scaleX: 0 }} // 元のサイズに戻す
          transition={{ duration: 1 }}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100vh",
            backgroundColor: "#E3027E",
            zIndex: 10,
            transformOrigin: "right", // 縮小時に右端を基準にする
          }}
        />
        <motion.div
          key={location.pathname}
          initial={{ opacity: 1 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 1 }}
          transition={{ duration: 1.5 }}
          style={{ position: "relative", width: "100%", height: "100%" }}
        >
          //適用するコンポーネント
        </motion.div>
      </AnimatePresence>
    );
  };

細かい説明

全体

・　RouteWrapperコンポーネント

・ページ遷移のアニメーションを管理するためのコンポーネント

・　useLocationフック

・現在のルートの場所を取得し、ページの遷移を検知してアニメーションを制御する

・　AnimatePresenceコンポーネント

・Framer Motionのコンポーネントらしい...

motion.div（背景）

・keyプロパティ

・location.pathnameをキーとして指定することでページ遷移時に背景のアニメーションが適切にリセットされる

・initialプロパティ

・透明度は0.8、X軸方向のスケールは1

・animateプロパティ

・透明度を 1.0 に上げ、X軸方向に縮小させる

・exitプロパティ

・透明度を0.5 にし、X軸方向に縮小させる（scaleX: 0）

・transitionプロパティ

・アニメーションの期間（今回は１秒）

motion.div（コンテンツ）　

・styleプロパティ

・コンテンツのスタイル設定（今回はrelative）

参考

FramerMotion公式