Page Transitions Using React Transition Group
Unanswered
French Lop posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
French LopOP
im a bit lost, i tried to setup page transitions with RTG. so i got this layout:
but when the route changes, the content of
"use client";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import { usePathname } from "next/navigation";
import { useRef } from "react";
export default function TransitionLayout({ children }) {
const pathname = usePathname();
const mainRef = useRef();
console.log(pathname);
return (
<SwitchTransition>
<CSSTransition
nodeRef={mainRef}
timeout={500}
classNames="fade"
key={pathname}
>
<main ref={mainRef} key={pathname}>{children}</main>
</CSSTransition>
</SwitchTransition>
);
}
but when the route changes, the content of
main
gets replaced immeadetely (but otherwise the transitions are working well), i.e. i click on "about", the content gets replaced before it fades out and in. does this have to do with RSC?5 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
French LopOP
hmm i noticed that
logs already the new children state, when i do the same log in the RTG example from their website, it logs the old state, could it be that the next layout component gets noticed by the router (
useEffect(function(){
console.log(mainRef.current.innerHTML)
}, [pathname])
logs already the new children state, when i do the same log in the RTG example from their website, it logs the old state, could it be that the next layout component gets noticed by the router (
pathname
) only after the children have already been updated so that RTG has no chance to clone the old node and holds on to it until the transition is done?![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
French LopOP
i just built a very simple dummy transition just to understand better whats going on
function Transition({ children, nodeRef }) {
const [cloned, setCloned] = useState(children);
useEffect(
function () {
nodeRef.current.style.opacity = 0;
window.setTimeout(function () {
nodeRef.current.style.opacity = 1;
setCloned(cloneElement(children));
}, 500);
},
[children, nodeRef]
);
return cloned;
}
it behaves like RTG and its interesting, since on route change, the state
cloned
doesnt update (only 500ms later) and still the content changes![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
French LopOP
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Newfoundland
have you got any solution/work around for this? Dealing with the same issue here.