我正在使用Framer Motion 7.3.6和NextJS 12.2.2，并试图创建一个简单的页面过渡。
首先，我创建了一个 Package 器组件，如下所示：

//PageWrapper.js
import { motion } from "framer-motion";

const PageWrapper = ({ children }) => {

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
    >
      {children}
    </motion.div>
  );
};

export default PageWrapper;

然后继续更新我的app.js文件。

// app.js
import "../styles/global.css";
import Navbar from "../components/Navbar/Navbar";
import { AnimatePresence } from "framer-motion";

export default function App({ Component, pageProps, router }) {
  return (
    <>
      <Navbar />
      <AnimatePresence exitBeforeEnter>
        <Component {...pageProps} key={router.route} />
      </AnimatePresence>
    </>
  );
}

然后把我的index.js包在里面。

Currently at//index.js
import styles from "./index.module.css";
import ShuffleText from "../components/shuffletext";
import Navbar from "../components/Navbar/Navbar";
import Footer from "../components/Footer/Footer";
import { AnimatePresence, motion } from "framer-motion";
import PageWrapper from "../components/PageWrapper";

export default function Home() {
  const itemVariants = {
    hidden: { y: 30, opacity: 0 },
    visible: { y: 0, opacity: 1 },
  };

  return (
    <PageWrapper>
        <Navbar />
        <div className={styles.Wrapper}>
          <motion.div
            className={styles.mainContent}
            initial="hidden"
            animate="visible"
            key="mainContent"
          >
            <motion.p
              variants={itemVariants}
              initial="hidden"
              animate="visible"
              key="first"
              exit={{ y: -200, opacity: 0 }}
              transition={{ type: "spring", damping: 20, stiffness: 40 }}
            >
              First line
            </motion.p>
            <motion.p
              variants={itemVariants}
              initial="hidden"
              animate="visible"
              key="second"
              transition={{
                type: "spring",
                damping: 20,
                stiffness: 40,
                delay: 0.2,
              }}
              exit={{ y: -200, opacity: 0 }}
            >
              Second line
              </a>
            </motion.p>
          </motion.div>
        </div>
      <Footer />
    </PageWrapper>
      );
}

我可以在页面呈现时看到动画，但不能看到退出动画。我一直在尝试在其他部分使用<AnimatePresence>，但没有成功。
我尝试了很多很多的定位排列，尝试传递不同的键，相等的键，没有键。似乎没有什么能让这工作。
我相信有一件事可能是相关的，因为我使用<a>浏览页面，而不是<Link>，因为我使用<ShuffleText/>组件创建类似的结果，当用户悬停在链接https://locomotive.ca/en上。我不能做像<Link hrf="/"><ShuffleText text={"example"}/></Link>这样的事情。
你知道是什么导致了这种行为吗？是否与不使用<Link>有关？
编辑：为我刚才尝试的问题添加了一个部分解决方案。它是部分的，因为它可以从/writing'到/writing/[slug]，但不能从'/'到'/writing'。在这一点上，我非常确信它与<Link/>有关，因为要转到/[slug]，我使用的是NextJS组件。

import "../styles/global.css";
import Navbar from "../components/Navbar/Navbar";
import { AnimatePresence, motion } from "framer-motion";
import { useRouter } from "next/router";

export default function App({ Component, pageProps }) {
  const router = useRouter();

  return (
    <>
      <AnimatePresence exitBeforeEnter>
        <motion.div
          key={router.route}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{
            duration: 1,
            ease: "easeInOut",
          }}
        >
          <Navbar />

          <Component {...pageProps} key={router.route} />
        </motion.div>
      </AnimatePresence>
    </>
  );
}