Exit animation is not working in react-transition-group.

[dquevid]

Which project does this relate to?

Router

Describe the bug

I want to animate the <Outlet> component with <SwitchTransition> from react-transition-group. So basically i wrote this in the root route:

<SwitchTransition>
    <CSSTransition key={location.pathname} classNames="page" timeout={300}>
        <Outlet />
    </CSSTransition>
</SwitchTransition>

But when the outlet component is updated it's previous state exit-animation doesn't perform, but the updated outlet's enter-animation works fine.
There is no issue such issue in react-router-dom.

Your Example Website or App

https://stackblitz.com/edit/github-cwbn3w

Steps to Reproduce the Bug or Issue

1. Go to Explore route.
2. See how the <Outlet /> component animation is buggy, but the <input /> animation is fine.

Expected behavior

The exit animation of the outlet should be executed after location.pathname is changed.

Screenshots or Videos

Platform

• OS: Linux (WSL)
• Browser: Edge, Firefox
• Version: 132.0.2

Additional context

No response

[dquevid]

I have found some sort of a workaround to make the exit-animation execute. To make it happen i just substitute the useLocation().pathname key prop value with pathname state and register a useEffect that'll update the pathname once the useLocation().pathname has changed.

const location = useLocation();

const [pathname, setPathname] = React.useState('');

React.useEffect(() => {
  setPathname(location.pathname);
}, [location.pathname]);

Though it manages to make exit-animation execute, the <Outlet /> component match switches before the exit-animation is over. The interesting part about that is that in react-router-dom the same effect happens if you use <Outlet /> component.

But, if you pass useOutlet() as an expression the animation works perfectly. react-router-dom showcase.

I wonder, what am i doing wrong...