让 CSSTransition 对工作类名称做出反应并没有改变答案

【问题标题】：getting react CSSTransition to work className is not changing让 CSSTransition 对工作类名称做出反应并没有改变
【发布时间】：2020-07-21 23:27:38
【问题描述】：

您好，我已经将这段代码扔了 4 个多小时，但仍然无法让它工作
让这样一个简单的代码工作并不难
默认情况下，登录组件应该是隐藏的，并且它应该出现在事件中然而，无论 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"

需要你的帮助

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

【问题讨论】：

你能分享你的css用于登录页面吗？

标签： reactjs react-transition-group

【解决方案1】：

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

所以，为你的过渡的多个阶段开设一堂课是件好事，比如

登录页面-进入
signinpage-enter-active
登录页面退出
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

【讨论】：