如何修复 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

更新了您的代码供您参考。