Framer Motion+Next.js+Chakra UI中animatePresence退出动画偶尔失效

在Next.js项目中使用Framer Motion的animatePresence实现页面过渡时遇到异常：仅当设置mode="wait"时，x轴退出动画（从x:0到x:200）偶尔会直接跳变，无法平滑过渡，但透明度淡出动画始终正常。

相关代码 #

_app.tsx #

<AppSettingProvider>
  <ChakraProvider theme={theme}>
    <Flex flexDir="column" minH="100vh">
      <Header />
      <Box
        h="100vh"
        pos="relative"
        px={{ base: "20px", md: "20px", lg: "25px", xl: "150px" }}
      >
        <Flex flexDir="column" minH="calc(100vh - 80px)">
          <Flex justifyContent="start" minH="100vh" pos="relative">
            <Sidebar2 />
            <Stack
              w="full"
              mt={{ base: "80px", xl: "100px" }}
              mr={{ xl: "30px" }}
              ml={{ xl: "5px" }}
            >
              <AnimatePresence initial={false} mode="wait">
                <Component key={pageKey} {...pageProps} />
              </AnimatePresence>
            </Stack>
          </Flex>
        </Flex>
        <Footer />
      </Box>
    </Flex>
  </ChakraProvider>
</AppSettingProvider>

PageTransition.tsx #

function PageTransition({ children }: { children: ReactNode }) {
  return (
    <>
      <motion.div
        initial={{ opacity: 0, x: 200 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: 200 }}
        transition={{duration: 0.2}}
      >
        {children}
      </motion.div>
    </>
  );
}

页面示例（page1 & page2） #

<>
  <PageTransition>
    <Box
      as="section"
      id="dashboard-hero-section"
      pb={{ base: "4", md: "8" }}
    >
      <Stack
        direction={{ base: "column", sm: "row" }}
        justifyContent="space-between"
        alignItems="center"
      >
        <Heading>Page 2</Heading>
      </Stack>

      <Box
        bg="red"
        width="500px"
        height="500px"
      >
      </Box>
    </Box>
  </PageTransition>
</>

已尝试的解决方案（均无效） #

• 更换x/y以外的动画，仅x/y动画出现此问题
• 精简页面及_app.tsx代码
• 将animatePresence移至_app.tsx外部

期望每次退出动画都能平滑执行，不再出现随机跳变的异常。

内容的提问来源于stack exchange，提问作者Nue Nu