javascript - Why are transitions not working for elements created in by react

Question

I have this css applied to elements in react

.my-float{

    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 1em;
    transition: 2s;
    transition-timing-function: ease-in;
}

and in my component I have

 {(!visibility)&&<i className="fa fa-angle-up my-float" ></i>}
 {visibility&&<i className="fa fa-times my-float" ></i>}

As you may see I have the ability to toggle these two elements, the challenge is the transitions are not applied. How can I make sure the transitions work? I want the elements to fade in and fade out when appearing and disappearing respectively.

Answer 1

With your code, you are adding/removing your <i> from DOM depending on visibility

So you won't have any CSS-transition if your icon is removed from DOM, or if your icon has just been added to DOM.

Your icon needs to be on DOM everytime so CSS transitions can apply

<>
  <i className={`fa fa-angle-up my-float ${visibility && 'hidden'} />
  <i className={`fa fa-times my-float ${!visibility && 'hidden'} />
</>

Or using https://www.npmjs.com/package/clsx

import cn from 'clsx';

<>
  <i className={cn('fa fa-angle-up my-float', visibility && 'hidden')} />
  <i className={cn('fa fa-times my-float', !visibility && 'hidden'} />
</>