Next.js 下一个JS帧运动淡出

我尝试使用帧运动和下一个js创建淡入淡出效果，但它从不淡出。我了解

AnimatePresence允许组件在从React树中删除时设置动画。

这可能是我的问题，但我对React了解不够，无法知道如何修复我的结构。有人能推荐一种让它褪色的方法吗？这里有几页

_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>
)
}}

导出默认类BookingApp扩展应用程序{
render（）{
返回(
)
}}

一些简单的页面

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

类TestPage扩展React.Component{
渲染（）{
返回
{resultsList}
;
}}

Hi，正如您自己所说，组件卸载时会触发AnimatePresence。很难说清楚您的案例中到底发生了什么，因为您的代码片段是毫无帮助的。附加代码沙盒示例将有助于理解您的问题！