Next.js Discord

Discord Forum

Page Transitions Using React Transition Group

Unanswered
French Lop posted this in #help-forum
Open in Discord
Avatar
French LopOP
im a bit lost, i tried to setup page transitions with RTG. so i got this layout:
"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
French LopOP
hmm i noticed that
  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
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
French LopOP
i also posted on SE: https://stackoverflow.com/questions/76648218/vanilla-react-page-transitions-in-next-js
Avatar
Newfoundland
have you got any solution/work around for this? Dealing with the same issue here.