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>;