CODEWITHSUNDEEP
cssreactjscss-transitions
user11569827
user11569827

Reputation: 165

How to create animated color transition in react.js?

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>

Upvotes: 8

Views: 8917

Answers (2)

Mohammed Al-Reai
Mohammed Al-Reai

Reputation: 2816

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

Upvotes: 0

AdityaSrivast
AdityaSrivast

Reputation: 1084

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

Upvotes: 9

Related Questions