React CSS Transition Not Working On Exit Or Enter

Question

This is within my component file

     <CSSTransition
        classNames="method"
        in={radio === 'add-card'}
        exit={radio !== 'add-card'}
        timeout={500}
        unmountOnExit>
        <div className=" ">
          Hello
        </div>
</CSSTransition>

This is my css file

.method-enter {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.method-enter-active {
  opacity: 1;
}

.method-exit {
  opacity: 1;
  transition: opacity 500ms ease-out;
}

.method-exit-active {
  opacity: 0;
}

My CSSTransition is supposed to start off inactive. When I set the condition to true, there is no fade-in animation. It just appears instantly. Setting the condition to false makes the transition disappear after 500ms instead of fading out.

Is there something wrong with my css? My goal is to make the enter and exit a 500ms fade-in and fade-out.

score 1 · Answer 1 · answered Oct 23 '21 at 22:31

It is specified in the docs to have transitions applied to the active classes. Move your transition property to .method-enter-active and .method-exit-active.

like this:

.method-enter {
  opacity: 0;
}

.method-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.method-exit {
  opacity: 1;
}

.method-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-out;
}

Also, depending on how your styles are set on your div element, you will want to either specify an end state for enter or exit. I personally always add them regardless. So you would also want to add the following:

.method-enter-done {
  opacity: 1;
}

.method-exit-done {
  opacity: 0;
}

React CSS Transition Not Working On Exit Or Enter

1 Answers1