How to create animated color transition in react.js?

Question

I have a navbar that changes color when a condition is met, but it happens instantly. Is there a way to make a smooth transition between two colors instead? I mean sth like -webkit-transition (putting it inside style={{...}} doesn't seem to work like in the other cases).

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

      </Navbar>

don't set by style... set a className, and then, define the transition in css file — Joao Polo
– Joao Polo, Commented Jul 10, 2019 at 15:14
I guess React does add/remove the styles as it is re-rendering the component. Therefore the "transition" is not always there. You could set the "transition: 1s all" in a global CSS, then, the color-switch could work. Hard to say without a working example tho. — niorad
– niorad, Commented Jul 10, 2019 at 15:17

AdityaSrivast · Accepted Answer · 2019-07-10 15:44:36Z

9

You can set using transition or WebkitTransition property, in addition to the applied inline style.

Try like this:

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

I tried creating a codesandbox example, have a look:

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

For transition property, refer: https://css-tricks.com/almanac/properties/t/transition/

Hope this helps!!

edited Jul 10, 2019 at 15:44

answered Jul 10, 2019 at 15:35

AdityaSrivast

1,0841 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammed Al-Reai · Accepted Answer · 2019-07-10 16:08:15Z

0

look to image [look to image ][or look to code]

import React from 'react';

export default () => { return

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

}}>You are logged in. };

answered Jul 10, 2019 at 16:08

Mohammed Al-Reai

2,85617 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to create animated color transition in react.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related