1

I have a dumb question of React Components

a. I could do react component creation by using State to control:

{
  is_active ? (
    <div>...</div>
  ) : null
}

b. I could also insert opacity transitions, reference: React fade in element

c. But how do I combine (a) & (b) into 1. fade in while is_active = true 2. fade out while is_active = false

Is there an easy way to do it?

Vanson Wing Leung
  • 315
  • 5
  • 14

2 Answers2

2

If you just want the classes used according to the is_active variable, then this could do :

<div className={is_active ? 'fade-in' : 'fade-out'}>...</div>

There's also a classNames package on npm easing all the class attribute generation.

If you want the component to unmount after it fades out, this is a bit trickier but you can find help in, for example, React Transition Groups or React Motion (the most popular ways to do this, feel free to find or create one that best suits your needs)

3Dos
  • 3,210
  • 3
  • 24
  • 37
1

You can do something like this:

{
  is_active ? (
    <div className="fade-in">...</div>
  )
  :
  (
    <div className="fade-out">...</div>
  )
}
Triyugi Narayan Mani
  • 3,039
  • 8
  • 36
  • 56