react-transition-group
react-transition-group copied to clipboard
reactjs
How we can apply css transition using React-router-dom v6?
<TransitionGroup> <CSSTransition timeout={100} classNames='fade' unmountOnExit> <Routes> <Route exact path="/a" element={<A/>} /> <Route exact path="/b" element={<B/>} /> </Routes> </CSSTransition> </TransitionGroup>
I tried with this code but was not able to open the component.
I export the route in the layout to realize the animation. At present, I have no problem in my react 17.0.2 and react router DOM 6.2.1
<Content className="relative p-5">
<Suspense fallback={<div>Loading...</div>}>
<TransitionGroup component={null} exit={false}>
<CSSTransition
key={transitionKey.pathname}
classNames="my-node"
addEndListener={(node, done) =>
node.addEventListener("transitionend", done, false)
}
unmountOnExit
>
<Outlet />
</CSSTransition>
</TransitionGroup>
</Suspense>
</Content>
@Zzongke Is there any more information or code you can share? I have this issue but your code doesn't make sense to me.
@fakesamgregory I don't know what information or code you need me to share with you? Can you elaborate?
@Zzongke That's what I'm asking from you :)
Looking at the example shared, to render and transition between multiple routes they show rendering each <Route> with a <CSSTransition /> within each route that then contains the page Component. Because Routes now require element props which cannot be a function we cannot replicate the method shown in the example.
Your code only shows <Outlet /> with no code to demonstrate the individual routes that you're transitioning between so I cannot draw the distinction between your code and react-transition-group example.
Hope this helps. Not sure how I can explain with any more detail.
@fakesamgregory It is very clear on the official website of react transition group V6 < outlet / >. If you want an example demonstration, please wait a moment.
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
{/* This element will render either <DashboardMessages> when the URL is
"/messages", <DashboardTasks> at "/tasks", or null if it is "/"
*/}
<Outlet />
</div>
);
}
function App() {
return (
<Routes>
<Route path="/" element={<Dashboard />}>
<Route
path="messages"
element={<DashboardMessages />}
/>
<Route path="tasks" element={<DashboardTasks />} />
</Route>
</Routes>
);
}
@Zzongke Thank you for this. Seeing it together in your project gave me the information I needed to get it working however this is not a direct replacement for the example show by react-transition-group on their website. For one, you are disabling exit animations and the secret sauce to this working (I believe) is the timeout prop as well as the unique CSSTransition per route so that the library can duplicate the page and allow it to exit and the new page to enter. Currently, the Router immediately switches the route and so you see a duplication of the new page as opposed to a copy of the old + new page to transition between the two. I hope this makes sense.
The point is, this is still not working for me. Your example works in a specific use case (not seeing exit animations) but not mine.
@bhaveshborgoankar / @Joan1106web Have you managed to find a solution?
@fakesamgregory Now I try to use the CSS of the official website to realize the exit animation. You can see my newly updated demo. When I use asynchronous components, a strange problem is found on the page. When you open the console, you can find that the exit page will be saved. After execution, the saved component page will disappear. There is no problem when I don't use asynchronous components. I don't know the reason.
@fakesamgregory When I wrap < suspense > around < outlet >, there is no problem. I hope it will be helpful to you.
<TransitionGroup component={null}>
<CSSTransition
key={transitionKey.pathname}
classNames="my-node"
addEndListener={(node, done) =>
node.addEventListener("transitionend", done, false)
}
unmountOnExit
>
<div className="my-node">
<Suspense fallback={<div>Loading...</div>}>
<Outlet />
</Suspense>
</div>
</CSSTransition>
</TransitionGroup>
@Zzongke thank you so much for taking the time to help. I've followed your code closely. I'm seeing the duplicate as you have seen but once again, it's a duplicate of the new page, not the current + new page. I'm even seeing this in your app. You can see the id in this screenshot that shows it's transitioning in and out of the same page.
@fakesamgregory Yes, I found it's just the animation of the same page. I can only see if the author can solve it
Did anyone solve this by any chance? Running into the same problem of duplicated page with react-router 6.8.1
Did anyone solve this by any chance? Running into the same problem of duplicated page with react-router 6.8.1
I've been playing around with the example on http://reactcommunity.org/react-transition-group/with-react-router and I have found that it is critical to use useOutlet() instead of <Outlet/>. The useOutlet hook should be called outside of the transition so that it stays mounted regardless of the current route. Placing <Outlet /> inside of the transition will cause the entering page to be shown during the exit transition instead of the exiting page.
The nodeRef stuff, on the other hand, is not critical and the example seems to work without it. But you'll get warnings about using findDOMNode in StrictMode if you don't use it.
