如何修复 React 的 CSS 转换？

Question

我正在构建一个简单的登录/注册屏幕。我正在通过状态变量切换登录/注册表单。切换工作正常，但一切都发生在一帧内，我想为表单容器的高度过渡设置动画，以及在切换时淡入或淡出表单。我正在努力理解/驯服过渡属性，到目前为止我设法过渡了高度，但它只工作一次，当然，我无法为表单不透明度设置动画。谁能帮我弄清楚我错过了什么？代码沙盒链接：https ://codesandbox.io/s/wizardly-flower-e42dj

Answer 1

最好将代码粘贴到此处，但无论如何您都可以使用 CSS 关键帧来实现淡入效果。.fade-in {  animation: fadeIn ease 1s;  -webkit-animation: fadeIn ease 1s;  -moz-animation: fadeIn ease 1s;  -o-animation: fadeIn ease 1s;  -ms-animation: fadeIn ease 1s;}@keyframes fadeIn {  0% {    opacity:0;  }  100% {    opacity:1;  }}@-moz-keyframes fadeIn {  0% {    opacity:0;  }  100% {    opacity:1;  }}@-webkit-keyframes fadeIn {  0% {    opacity:0;  }  100% {    opacity:1;  }}@-o-keyframes fadeIn {  0% {    opacity:0;  }  100% {    opacity:1;  }}@-ms-keyframes fadeIn {  0% {    opacity:0;  }  100% {    opacity:1;  }}当您添加类以显示登录表单和注册表单时，也要添加这个“淡入”类。同样，您可以为淡出编写相同的内容。https://codesandbox.io/s/broken-wildflower-dwn0q?file=/src/App.js更新了您的代码供您参考。