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

Question

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

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

      </Navbar>

Answer 1

除了应用的内联样式之外，您还可以设置 usingtransition或property。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/

希望这可以帮助！！