Question

嗨，我已经把这个代码扔了四个多小时了，但仍然无法正常工作
很难获得像这样的简单代码
默认情况下，登录组件应该是隐藏的，并且在事件中应该显示但是无论this.state.SignInPage值是什么，我都可以看到，即使我尝试手动输入也无济于事所以我的主要问题是 in和classNames属性不起作用

<CSSTransition
 in={this.state.SignInPage}
 timeout={1500}
 classNames="signinpage"           
>
  <SignInPage />
</CSSTransition>

默认情况下，启动状态为false，但是无论我做什么，它总是可见的
在控制台中，主div的className到那时都不改变
我正在使用

"react-transition-group": "^4.4.1",
"@types/react-transition-group": "^4.4.0"

请需要您的帮助

修改我只是注意到，我看到的许多示例中有条件渲染的组件都是基于函数的，而不是基于类的，我的组件是class，这对您有什么帮助？
编辑2 通过卸载所有内容然后重新安装并使用相同的代码来解决问题
经过漫长的一天，我不是问题，现在可以正常工作

Answer 1

您需要添加适当的CSS样式以与您的组件进行协调。

因此，最好有一个类来进行转换的多个阶段，例如

signinpage-enter
signinpage-enter-active
signinpage-exit
signinpage-exit-active

CSSTransition 在内部与执行所有这些魔术操作的CSS类挂钩

.signinpage-enter {
  opacity: 0.01;
}

.signinpage-enter-active {
  opacity: 1;
  transition: all 1s;
}

.signinpage-exit {
  opacity: 1;
}

.signinpage-exit-active {
  opacity: 0.01;
  transition: all 1s;
}

您也可以参考Working Example of React transition

得到反应CSSTransition工作className不变

1 个答案: