Как создать анимированный цветовой переход в Reaction.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

посмотрите на изображение [посмотрите на изображение] [или посмотрите на код]

import React from 'реагировать';

export default () => {return

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

}}> Вы вошли в систему.};