Nextjs + react-transition-group不动画

Question

我遇到了nextjs + react-animation-group的麻烦，我不得不按照文档来实现，但不起作用，我需要在2.5秒内将一个组件从不透明度0动画到1。下面是我的测试：

https://codesandbox.io/s/transition-group-u5htd

你可以看到“动画div”立即出现，而不是不透明的过渡，有什么想法如何解决？

Thx全部

Answer 1

试试这个:-

pages/_app.js

export default function MyApp({ Component, pageProps, router }) {
  return (
    <SwitchTransition mode='out-in'>
      <CSSTransition key={router.pathname} classNames='page' timeout={300}>
        <Component {...pageProps} />
      </CSSTransition>
    </SwitchTransition>
  );
}

global.css

.page-enter {
  opacity: 0;
  transform: scale(1.1);
}
.page-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}
.page-exit {
  opacity: 1;
  transform: scale(1);
}

.page-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}```

Answer 2

您需要在CSSTransition标签上添加appear={true}，并为显示活动添加css。我认为与其在<style jsx global>标签中编写css，不如定义一个新的css文件并导入它。

.div-appear {
  opacity: 0.01;
}
.div-appear-active {
  opacity: 1;
  transition: all 10000ms ease-out;
}

你可以在这里查看CodeSandBox，希望它能帮助你:)