Css 如何在react.js中创建动画颜色转换？

我有一个导航栏，当条件满足时会改变颜色，但它会立即发生。有没有办法在两种颜色之间进行平滑过渡？我的意思是类似-webkit转换的东西（将它放在style={{…}}中似乎不像在其他情况下那样工作）

例子
...

除了应用的内联样式外，还可以使用

转换

或

WebKittTransition

属性进行设置

试着这样做：

style={{
  backgroundColor: condition ? "red" : "green",
  transition: "all .5s ease",
  WebkitTransition: "all .5s ease",
  MozTransition: "all .5s ease"
}}

我尝试创建一个

codesandbox

示例，看看：

有关转换属性，请参阅：

---

希望这有帮助

查看图像[查看图像][或查看代码]

从“React”导入React

导出默认值（）=>{ 返回 }}>您已登录。

---

};

不要按样式设置。。。设置一个类名，然后在css文件中定义转换。我想React在重新呈现组件时会添加/删除样式。因此，“过渡”并不总是存在。您可以在全局CSS中设置“transition:1s all”，然后颜色切换就可以工作了。很难说没有一个有效的例子tho.yep！这似乎是css的工作

style={{
  backgroundColor: condition ? "red" : "green",
  transition: "all .5s ease",
  WebkitTransition: "all .5s ease",
  MozTransition: "all .5s ease"
}}

backgroundColor: condation ? "truecolor" : "falsecolor",
transition: "all 0.8s ease",
WebkitTransition: "all 0.8s ease",
MozTransition:"all 0.8s ease"