search

reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.15k stars 650 forks source link

Transition not working the first time for only one component #494

Open francois-filae75 opened 5 years ago

francois-filae75 commented 5 years ago

What is the current behavior? Transition to a Route not triggering the first time only for this Route and go to the path only after a delay. In other case than this one, transitions work smoothly.

What is the expected behavior? Transition like a slider between 2 Routes.

lxcid commented 5 years ago

I believe I faced similar issue and I think its due to the root element return by the children() function not being a DOM node, which end up triggering a 0 timeout instead.

https://github.com/reactjs/react-transition-group/blob/65cd9f83309ade93aa9c21d6f6b3c18cbf9e5f27/src/Transition.js#L212

https://github.com/reactjs/react-transition-group/blob/65cd9f83309ade93aa9c21d6f6b3c18cbf9e5f27/src/Transition.js#L316-L319

Something like this should be able to trigger the issue…

<Transition in={isOpen} timeout={3333} unmountOnExit>
  {transitionState => {
    return (
      <React.Fragment>
        <span>{transitionState}</span>
      </React.Fragment>
    );
  }}
</Transition>

In my use case, I'm using react-layers-manager which require multiple render to create the portal. So it end up trigger this use case when the first view render return null…