Using mountOnEnter and unmountOnExit throws transition

[stuartambient]

Using RTG Transition (not CSS)

What is the current behavior?

I have both mountOnEnter and unmountOnExit set to true. (Commented out in my gist below). With them set, I get the mount and unmount working fine, but no transition. In my case it is 5 components that go from opacity 0 to 1, each one delayed after it's predecessor. Leaving the mount and unmount options out, the transition works fine. Using RTG Transition (not CSSTransition).

What is the expected behavior?

Expected - components mount, opacity cycles from 0 - 1. Same in reverse when in = false. Then components unmount.

Could you provide a CodeSandbox demo reproducing the bug? I do not have my project in a sandbox but here is a gist with the appropriate code https://gist.github.com/stuartambient/a77f463dcf59d44f972f6f801f3fbd6d

[zajhar]

@stuartambient I have the same issue 😢

[htmlin]

@stuartambient I have the same issue 😢

[DavidODonovan]

same: my transition to mount component happens smoothly, but the unmounting happens immediately. It's as if as soon as the component receives state of 'exiting' it is immediately removed from the DOM.

[DavidODonovan]

I have a quick fix: I have been using a useRef() hook on the element I am transitioning: <Transition nodeRef={nodeRef}...> If I remove that ref then the element transitions as expected before being unmounted from DOM, but you still get an error. The fix for this error is show below, where I use the SAME REF on two elements: a wrapper div and then the Transition component. I don't quite understand why this works...

<div ref={nodeRef}> <Transition nodeRef={nodeRef}...> </Transition> </div>