CSSTransition enter first tick
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