Javascript 如何修复react上的CSS转换？

我正在构建一个简单的登录/注册屏幕。我通过状态变量切换登录/注册表单。切换效果很好，但一切都发生在一个帧中，我想为表单容器的高度转换设置动画，并在切换时淡入或淡出表单。我正在努力理解/驯服过渡属性，到目前为止，我成功地过渡了高度，但它只工作了一次，当然，我还没有能够为形状不透明度设置动画。谁能帮我找出我遗漏了什么？代码沙盒链接：

最好将代码粘贴到这里，但无论如何 可以使用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;
  }
}

当您添加类来显示登录表单和注册表单时，也可以添加这个“淡入”类。同样，您也可以为淡出编写相同的代码

---

更新代码以供参考。

非常感谢！对于表单容器高度是否也适用相同的操作？您可以对要淡入的任何组件执行相同的操作，或者将它们组合在一个组件中并应用于该组。对于高度，如果要提供拉伸效果，则可以使用宽度CSS过渡。