如何在 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；

导出默认值 () => { return

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

}}>您已登录。 };

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

How to create animated color transition in react.js?

css

css-transitions

reactjs