next.js - Nextjs + react-transition-group 没有动画

Question

我在使用 nextjs + react-animation-group 时遇到了麻烦，我已经按照文档进行实现但不起作用，我需要在 2.5 秒内将不透明度从 0 变为 1 的组件进行动画处理。这是我的测试:

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

你可以看到“Animation div”立即出现而不是不透明过渡，有什么解决办法吗？

谢谢大家

Answer 1

试试这个:-

页面/_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>
  );
}

全局.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;
}```