Nextjs + react-transition-group 不设置动画答案

【问题标题】：Nextjs + react-transition-group don't animateNextjs + react-transition-group 不设置动画
【发布时间】：2020-07-04 18:45:45
【问题描述】：

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

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

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

谢谢大家

【问题讨论】：

标签： next.js react-transition-group

【解决方案1】：

您需要在 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，希望对你有帮助:)

【讨论】：

嗨，iamhuynq，你能解释一下为什么需要appear={true}吗？我的classNames 目前不会被添加，除非我包含出现道具。

【解决方案2】：

试试这个：-

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

【讨论】：