我使用framer motion animatePresence在我的nextjs页面之间添加一点页面过渡。我发现了这个奇怪的bug，有时候退出动画会立即移动（从x：0到x：200），但淡入淡出效果正常，而且不会立即执行。这也只在animatePresence mode=“wait”时发生。
下面是gif：App demo
my _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>
    </>

myPageTransition.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>
    </>
  );
}

我的第1页和第2页tsx：

<>
      <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
• 将animatePresence放在_app之外

我期待顺利的动画每次退出动画运行，但相反，发现这种奇怪的行为随机不动画和动画。