CSSTransition enter first tick

[organdonor47]

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.

[bkbooth]

I just upgraded to 4.4.5 and I've got this issue too. I'd like to confirm whether the new behavior is a bug or not before fixing my animation CSS (for now I'm reverting back to 4.4.2).

In my example I have an element that slides in from the right and my styles are like this, it's worked this way a long time.

.element {
  /* ...other styles */

  transition: transform 300ms;
  
  &.enter-active,
  &.exit {
    transform: translateX(0);
  }

  &.enter,
  &.exit-active {
    transform: translate(100%);
  }
}

[olivierpascal]

Same here!