Javascript 如何在没有任何新依赖项的情况下在React JS中使用此CSS代码？

当用户在React JS中完成一个动作时，我试图在身体中创建一个绿色脉冲，以改善最终用户体验。然而，我很难做到这一点

我试图引用css样式并将其应用于HTML元素

从“./styles/styles.less”导入样式；
handleSuccess（）{
const body=document.getElementsByTagName（'body'）[0]；
body.style=style.body；
}

style.less

body {
  background-color: white;
  animation-name: color;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes color {
  0% {
    background-color: #DEFAE8;
  }
  50% {
    background-color: #62EB96;
  }
  100 {
    background-color: #91F1B5;
  }
}

我见过类似的解决方案声明要安装“”包，但如前所述，我认为通过可用的样式选项，这是可能的

---

可以在React.js中使用

@keyframes

吗？

我建议在成功时为你的身体开设一门课程

body.success{
...
动画名称：彩色；
动画持续时间：2秒；
动画迭代次数：1；
}

然后，您可以根据需要网站处于的状态切换类

handleSuccess（）{
document.body.classList.add（“成功”）；
document.body.addEventListener（“animationend”，（）=>{
document.body.classList.remove（“成功”）；
});
}

---

注：您在

@关键帧中的
100
后缺少
%
，
您只需
文档即可引用主体。主体
，无需
文档。getElementsByTagName（'body'）[0]

您可以创建一个名为body pulse的类，并将其附加到handleSuccess（）上的body

代码沙盒：

  handleSuccess() {
    document.body.classList.add("body-pulse")
  }

@keyframes color {
  0% {
    background-color: #defae8;
  }
  50% {
    background-color: #62eb96;
  }
  100% {
    background-color: #91f1b5;
  }
}

.body-pulse {
  background-color: white;
  animation-name: color;
  animation-duration: 2s;
  animation-iteration-count: 1;
}