8

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>
3
  • 1
    don't set by style... set a className, and then, define the transition in css file 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. Commented Jul 10, 2019 at 15:17
  • yep! it seems to be a job for css Commented Jul 10, 2019 at 15:25

2 Answers 2

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!!

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

Comments

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. };

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.