I use react-router-dom v6 and react-transition-group.
This is a truncated example to illustrate my problem. I would like to give a slide effect to navigate between pages and a fade to show the login window. So I have 2 different "animations".
I know that upon "exiting" a given address (mean login on page1), the component is unmounted and removed from the DOM tree. But I don't know how to "stop" the unmounting of the component by the router for the duration of the animation? I've seen a few examples, but I don't know where I went wrong.
My sketch: https://codesandbox.io/s/animate-naviation-wfee3p
Examples:
http://reactcommunity.org/react-transition-group/transition-group https://codesandbox.io/s/animated-routes-demo-react-router-v6-6l1li https://codesandbox.io/s/animated-routes-outlet-demo-react-router-v6-h85sj http://reactcommunity.org/react-transition-group/with-react-router/