在Next.js中呈现动画13

of1yzvn4 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(137)

有人能告诉我如何将此代码转换为Next.js 13吗？我试图使用Framermotion创建一个页面动画，但我很难在Next 13中弄清楚这个过程。

// _app.js
    
import { AnimatePresence } from 'framer-motion'
    
function MyApp({ Component, pageProps, router }) {
    return (
        <AnimatePresence mode="wait" initial={false}>
          <Component {...pageProps} key={router.asPath} />
        </AnimatePresence>
    );
}

字符串

next.js

来源：https://stackoverflow.com/questions/76700969/animationpresense-in-next-js-13

1条答案

按热度按时间

ddrv8njm1#

layout.tsx:

import { usePathname } from "next/navigation";

 const pathname = usePathname();
  return (
    <html lang="en" className={roboto.className}>
      <body className="">
        <AnimatePresence mode="wait" initial={false}>
          <motion.div key={pathname}>
            {children}
          </motion.div>
        </AnimatePresence>
      </body>
    </html>

字符串
这就是我如何在layout.tsx中使用13

赞(0）回复(0）举报 2023-08-04

我来回答

在Next.js中呈现动画13

1条答案

相关问题

热门标签

最新问答