React-transition-group: Enter transitions break when using mountOnEnter or unmountOnExit

[alisd23]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Shown in: https://jsfiddle.net/alisd23/zoxzjphz/1/

Transitions do not seem to work correctly when using either mountOnEnter or unmountOnExit options with the <Transition> component.

1. When using the mountOnEnter option, the first _enter_ transition does not work, but the subsequent transitions do work. All _exit_ transitions work fine.
2. When using the unmountOnExit option, all _enter_ transitions break. Again all _exit_ transitions are fine.

You can just adjust the example fiddle to see these effects.

What is the expected behavior?
I would expect all transitions to work with either of these options applied, or both at the same time.

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
v2.2.1

[jquense]

This is a quirk of how css transitions work, you need to make sure they don't occur on the same "tick". CSSTransition handles this for you because it knows you are using css transitions, but Transition is lower level and makes no such assumptions:

https://jsfiddle.net/zoxzjphz/2/ (note the onEnter callback, accessing offsetHeight to reflow the browser)

[alisd23]

Ah yes of course - very interesting. Thanks for the quick response :+1:

[PoltP]

@jquense Jason, thanks for provided code sample, but for me it is still unclear, how the option 'unmountOnExit' can affect on entering animation. When I set 'unmountOnExit' my entering animation is lost and this is really unclear behavior.
Could you describe inner Transition logic in detail and change documentation if it is possible?

[nicewaytodoit]

@jquense This issue should be reopened when nodeRef={nodeRef} is added animation will stop working when unmountOnExit is present. All events entered,exiting,exited will be fired at once.

[finnmerlett]

@jquense This issue should be reopened when nodeRef={nodeRef} is added animation will stop working when unmountOnExit is present. All events entered,exiting,exited will be fired at once.

I had an issue similar to this. The exit animation was breaking when I switched to using nodeRef={nodeRef} and had enabled unmountOnExit. Turns out I had simply forgotten to set ref={nodeRef} on the child of the <Transition> element, and when I fixed that the problem was gone.