Open organdonor47 opened 1 year ago
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%);
}
}
Same here!
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 version4.4.5
I notice that I no longer get the tick fromenter
toenterActive
classes, instead bothenter
andenterActive
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 expectedWhat is the expected behavior?
When boolean
in
is set to true, classNames should be applied asenter
, then next tickenterActive
.