使用 Framer Motion 無法實現反應路由器頁面之間的平滑過渡

Question

現在已經一個多星期了，我不能讓它工作，。 我正在嘗試在反應頁面組件之間進行轉換，以使其在每個頁面上上下滾動，但是，在退出頁面上，第二個頁面需要更長的時間才能顯示，我無法弄清楚如何同步它，所以在第一個頁面上頁面上升。 第二頁也同時開始上升。

我正在使用AnimatePresence和exitBeforeEnter包裝應用程序組件。 感謝對正確方向的任何幫助。

以下是我對每個組件的變體

const containerVariants = {
  hidden: {
    opacity: 0,
    y: "-100vh",
  },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      stiffness: 15,
      damping: 10,
      mass: 0.4,
      staggerChildern: 0.4,
      // opacity: { duration: 0.02 },
      when: "beforeChildren",
    },
  },
  exit: {
    opacity: 0,
    y: "-100vh",
    zIndex: 0,
    transition: {
      type: "spring",
      stiffness: 15,
      opacity: { duration: 3 },
    },
  },
};

const Home = () => {
 
  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
    >
< code goes here>
    </motion.div>

Answer 1

您可能已經擁有它，但是您是否將key s 添加到<AnimatePresence內的頁面中？ 根據我的經驗，忘記它們會導致頁面/組件之間的動畫問題。

我遇到的另一個問題是因為沒有在<AnimatePresence>的直接子級上設置key （我在 AnimatePresence 和頁面之間有布局組件）。

也許您已經正確設置了所有這些，以確保:)

在我目前的項目中：

<AnimatePresence exitBeforeEnter>
  <Component
    {...pageProps}
    key={router.route}
    err={err}
  />
</AnimatePresence>