如何在react.js中创建动画的颜色过渡？

Question

我有一个导航栏，该导航栏在满足条件时会更改颜色，但是会立即发生。有没有办法在两种颜色之间进行平滑过渡？我的意思是说-webkit-transition（将其放入style = {{......}}内似乎在其他情况下不起作用）。

      <Navbar className="navbar" style={{backgroundColor: condition? 'red' : 'green'}}>
        <NavbarBrand href="/">Example</NavbarBrand>
         ...

      </Navbar>

Answer 1

除了已应用的内联样式外，您还可以使用transition或WebkitTransition属性进行设置。

尝试这样：

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

我尝试创建一个codesandbox示例，看看：

https://codesandbox.io/s/awesome-napier-rnveq?fontsize=14

有关过渡属性，请参见：https://css-tricks.com/almanac/properties/t/transition/

希望这会有所帮助！

Answer 2

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

从'react'导入React；

导出默认（）=> {   返回

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

}}>您已登录。 };