CSSTransition enter first tick

Author: organdonor47Created Aug 31, 2022Updated Mar 27, 2025

What is the current behavior?

I have a component that I render if the page is taking a while to load, and use unmountOnExit as it shouldn't otherwise be in the DOM. Since upgrading to version 4.4.5 I notice that I no longer get the tick from enter to enterActive classes, instead both enter and enterActive are applied at the same time, so the initial transition styles are not respected.

I have mitigated this by applying the initial enter styles to the component by default, and then applying enter styles to enterActive & enterDone classes. exit* classes on the other hand seem to work fine.

EDIT: this seems to have stopped working as expected at 4.4.4, previous versions work as expected

<CSSTransition
  in={isLoading}
  timeout={1000}
  classNames={{ ...s }}
  unmountOnExit
>
  <div
    className={s.loading}
    role="alertdialog"
    aria-busy="true"
    aria-live="assertive"
  >
    <Component />
  </div>
</CSSTransition>

What is the expected behavior?

When boolean in is set to true, classNames should be applied as enter, then next tick enterActive.

Source: reactjs/react-transition-group