让 CSSTransition 对工作 className 做出反应并没有改变

Question

你好，我已经将这段代码抛出 4 个多小时了，但仍然无法正常工作
让这样一个简单的代码正常工作并不难
默认情况下，登录组件应该被隐藏，并且在事件上它应该出现然而，无论 this.state.SignInPage 值是多少，它都是可见的我什至尝试手动输入它没有任何作用所以我的主要问题是 in 和 classNames 属性 不起作用

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

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

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

需要你的帮助

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

Answer 1

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

因此，class 适合您的多个过渡阶段，例如

登录页面-进入
登录页面进入活动
登录页面退出
登录页面-退出-活动

CSSTransition 内部挂钩这个 CSS class 做所有这些魔术

.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 做出反应并没有改变

getting react CSSTransition to work className is not changing

reactjs

react-transition-group