Next JS Framer 运动淡出

Question

我正在尝试使用 framer-motion 和 Next js 来创建淡入淡出效果，但它永远不会淡出。我明白 AnimatePresence allows components to animate out when they're removed from the React tree. 这可能是我的问题，但我不知道如何做出足够好的反应来修复我的结构。任何人都可以推荐一种让它淡出的方法吗？这里有一些页面...

_app.js

export default class BookingApp extends App {
render() {
return (
    <Provider session={pageProps.session}>
      <ThemeProvider theme={myTheme}>
        <GlobalStyles />
          <Layout>
            <AnimatePresence exitBeforeEnter>
              <Component {...pageProps} key={router.route} />
            </AnimatePresence>
          </Layout>
      </ThemeProvider>
    </Provider>
)
}}

一些简单的页面

class TestPage extends React.Component {
render () {
return <motion.div 
  exit={{ opacity:0 }}
  initial={{ opacity:0 }}
  animate={{ opacity:1 }}
>
  {resultsList}
</motion.div>;
}}

Answer 1

我刚遇到类似的问题。你motion.div一定有钥匙道具。在此处查看文档。 https://www.framer.com/docs/animate-presence/

<motion.div 
  key={"my_unique_key"}
  exit={{ opacity:0 }}
  initial={{ opacity:0 }}
  animate={{ opacity:1 }}
>
  {resultsList}
</motion.div>;

Next JS Framer 运动淡出

Next JS Framer Motion Fade Out

next.js

framer-motion