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

Question

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

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

您会看到“ Animation div”立即出现，而不是随着不透明过渡出现，您有什么解决方法吗？

全部谢谢

Answer 1

您需要在appear={true}标签上添加CSSTransition并添加css以使其处于活动状态

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

您可以在这里查看CodeSandBox，希望它对您有所帮助：）