时间戳

首页 > 解决方案 > 如何修复 CSS 转换的反应？

javascript - 如何修复 CSS 转换的反应？

问题描述

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

标签： javascriptcssreactjs

解决方案

最好在此处粘贴代码，但无论如何您都可以使用 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

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

推荐阅读