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

【问题标题】：How to create animated color transition in react.js?如何在 react.js 中创建动画颜色过渡？
【发布时间】：2019-11-20 06:05:46
【问题描述】：

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

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

      </Navbar>

【问题讨论】：

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

标签： css reactjs css-transitions

【解决方案1】：

看图[看图][或看代码]

从“反应”导入反应；

导出默认值 () => { 返回

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

}}>您已登录。 };

【讨论】：

【解决方案2】：

除了应用的内联样式外，您还可以使用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/

希望这会有所帮助！

【讨论】：