javascript 帧运动退出动画不适用于Next.JS

pnwntuvh  于 2023-01-01  发布在  Java
关注(0)|答案(2)|浏览(180)

我正在学习Next.JS和Framer Motion来提高我的技能。所以,我尝试做一个淡入/淡出页面转换,但不能让它正常工作,也不知道为什么。
淡入动画工作正常,但是,当我单击(更改当前页面)时,淡出不显示...
下面是我的代码:
/shared/layout.js

export default function Layout({ children }){
    return (
        <>
            <Head>
                <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
            </Head>
            <Header />
            <main>
                <AnimatePresence exitBeforeEnter>
                    { children }
                </AnimatePresence>
            </main>
        </>
    )
}

/pages/_app.js

function MyApp({ Component, pageProps }) {
  return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
  )
}

export default MyApp

/pages/index.js

export default function Home(){
  return (
    <motion.div id="home" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: .5 }}>
      <Head>
        <title>Home</title>
      </Head>
      
      // Bla bla bla goes here
    </motion.div>
  );
}

/pages/about.js

export default function About(){
  return (
    <motion.div id="about" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: .5 }}>
      <Head>
        <title>About</title>
      </Head>
      
      // Bla bla bla goes here
    </motion.div>
  );
}

/pages/contact.js

export default function Contact(){
  return (
    <motion.div id="home" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: .5 }}>
      <Head>
        <title>Contact</title>
      </Head>
      
      // Bla bla bla goes here
    </motion.div>
  );
}

在搜索时,我发现很多人说"目前,如果不添加初始状态,退出动画将无法工作",但我在所有motion.div组件上使用初始 prop ,并且我的AnimatePresence位置正确(我认为),作为所有motion.div组件的父级。
有人能帮帮我吗?
谢谢!

eeq64g8w

eeq64g8w1#

我做了几乎相同的操作,遇到了同样的问题。我通过在/pages/_app.js中执行以下操作解决了这个问题:

function MyApp({ Component, pageProps, router }) {
  return (
      <Layout>
        <Component key={router.pathname} {...pageProps} />
      </Layout>
  )
}

export default MyApp

所以我只是使用Nextjs提供的路由器为Component添加了一个密钥。

jecbmhm3

jecbmhm32#

我通过在_app中使用以下代码实现了相同的效果

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  key={router.asPath}
  transition={{
    duration: 0.3,
    ease: 'easeInOut',
    type: 'tween',
  }}
>
  <Component {...pageProps} />
</motion.div>

相关问题