通过路由器加载framer-motion页面时出现问题

Question

我会在场景中解释我的问题

• 我正在使用 Framer 运动和 React 来制作动画
• 使用vite创建react后，我在src文件夹下创建了一个组件文件夹
• 我在组件文件夹下创建了 Motion.jsx 文件。
• 我的应用程序中有多个页面，因此我使用 useNavigate() 路由到不同的页面
• 在App.jsx中我使用react-router-dom进行路由

它应该如何工作：

• 当我从landing.jsx导航到Motion.jsx文件时，Motion.jsx文件应该加载具有给定变体的，即稍微延迟加载它们
• 当我再次单击重新加载时，Motion.jsx 文件应该重新加载具有给定变体的，即稍微延迟加载它们

它是如何工作的：

• 当我从landing.jsx导航到Motion.jsx文件时，Motion.jsx文件正在加载具有给定变体的，即加载它们会略有延迟。
• 当我再次单击重新加载时，Motion.jsx 文件正在 重新加载 前两个 div 没有任何延迟，其他 div 具有正确的延迟

我已提供以下文件：

Motion.jsx --->

import {
    motion,
} from "framer-motion"

const gridContainerVariants = {
    hidden: { opacity: 0 },
    show: {
        opacity: 1,
        transition: {
            staggerChildren: 0.25,
        },
    },
}

const gridSquareVariants = {
    hidden: { opacity: 0 },
    show: { opacity: 1 },
}

const Motion = () => {
    return (
        <div className="flex flex-col gap-10 overflow-x-hidden">
            <motion.div
                variants={gridContainerVariants}
                initial="hidden"
                animate="show"
                className="grid grid-cols-3 p-10 gap-10"
            >
                {/* Fade Up */}
                <motion.div
                    variants={gridSquareVariants}
                    className="bg-slate-800 aspect-square rounded-lg justify-center flex items-center gap-10"
                >
                </motion.div>
                {/* Shape Shifting */}
                <motion.div
                    variants={gridSquareVariants}
                    className="bg-slate-800 aspect-square rounded-lg justify-center flex items-center gap-10"
                >
                </motion.div>
                {/* Button */}
                <motion.div
                    variants={gridSquareVariants}
                    className="bg-slate-800 aspect-square rounded-lg justify-center flex items-center gap-10"
                >
                </motion.div>
                {/* Drag */}
                <motion.div
                    variants={gridSquareVariants}
                    className="bg-slate-800 aspect-square rounded-lg justify-center flex items-center gap-10"
                >
                </motion.div>
                {/* Scroll Progress */}
                <motion.div
                    variants={gridSquareVariants}
                    className="bg-slate-800 aspect-square rounded-lg justify-center flex items-center gap-10"
                >
                </motion.div>
                {/* SVG Animation */}
                <motion.div
                    variants={gridSquareVariants}
                    className="bg-slate-800 aspect-square rounded-lg justify-center flex items-center gap-10"
                >
                </motion.div>
            </motion.div>
        </div>
    )
}

export default Motion

App.jsx -->

import Motion from "./components/FramerMotion/Motion";
import Hello from "./components/HelloTest/Hello";
import Auction from "./components/HOC/Auction";
import MovingBorder from "./components/Tailwind/MovingBorder";
import ResponsiveNavigation1 from "./components/Tailwind/ResponsiveNavigation1";
import ResponsiveNavigation2 from "./components/Tailwind/ResponsiveNavigation2";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
    return (
        <>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Hello />} />
                    <Route path="/auction" element={<Auction />} />
                    <Route path="/movingborder" element={<MovingBorder />} />
                    <Route path="/responsivenavigation1" element={<ResponsiveNavigation1 />}/>
                    <Route path="/responsivenavigation2" element={<ResponsiveNavigation2 />}/>
                    <Route path="/motion" element={<Motion />} />
                </Routes>
            </BrowserRouter>
        </>
    );
}

export default App;

文件树 -->

/public/
  └─ vite.svg
/src/
  /components/
    /FramerMotion/
      └─ Motion.jsx
    /HelloTest/
      └─ Hello.jsx
    /HOC/
      ├─ Auction.jsx
      ├─ HOC.jsx
      ├─ Person1.jsx
      └─ Person2.jsx
    /Tailwind/
      ├─ MovingBorder.jsx
      ├─ ResponsiveNavigation1.jsx
      └─ ResponsiveNavigation2.jsx
  ├─ App.jsx
  ├─ index.css
  └─ main.jsx
/.gitignore
/eslint.config.js
/index.html
/package.json
/postcss.config.js
/README.md
/tailwind.config.js
/vite.config.js

Answer 1

您可以尝试使用“react-router-dom”中的“useLocation”挂钩为“motion.div”创建一个唯一的键，确保它在导航和刷新时重新安装。以下是示例代码：

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

const Motion = () => {
    const location = useLocation();
    const gridContainerVariants = {
        hidden: { opacity: 0 },
        show: {
            opacity: 1,
            transition: { staggerChildren: 0.25 },
        },
    };

    const gridSquareVariants = {
        hidden: { opacity: 0 },
        show: { opacity: 1 },
    };

    return (
        <div className="flex flex-col gap-10 overflow-x-hidden">
            <motion.div
                key={location.key} // Unique key for re-mounting
                variants={gridContainerVariants}
                initial="hidden"
                animate="show"
                className="grid grid-cols-3 p-10 gap-10"
            >
                {Array.from({ length: 6 }).map((_, index) => (
                    <motion.div
                        key={index}
                        variants={gridSquareVariants}
                        className="bg-slate-800 aspect-square rounded-lg"
                    />
                ))}
            </motion.div>
        </div>
    );
};

export default Motion;