Page Transitions

[fweth]

Anyone managed to get page transitions (especially exit transitions) working with Waku? With Next's Page Router, one can cloneElement the children and freeze them until the transition is done:

function Transition({ children }) {
  const [cloned, setCloned] = useState(cloneElement(children));
  const router = useRouter();
  const divRef = useRef();
  useEffect(
    function () {
      divRef.current.style.opacity = 0;
      const timeout = window.setTimeout(function () {
        divRef.current.style.opacity = 1;
        setCloned(cloneElement(children));
      }, 500);
      return function () {
        window.clearTimeout(timeout);
      };
    },
    [router.asPath]
  );
  return (
    <div ref={divRef} style={{ transition: "opacity 500ms" }}>
      {cloned}
    </div>
  );
}

But this trick no longer works in the App Router, see this discussion (I'm 80% certain cloneElement is the same trick that Framer et al. are using in their frameworks), and I don't know if it's due to Next or due to React Server Components.

In any case, Waku exhibits the same behaviour, the transition component is not able to successfully freeze the children, they update immediately on route change. That being said, reading the documentation of cloneElement, I can't tell if children is a viable argument, or if it just worked "by accident" all the time...

[dai-shi]

I wonder if View Transitions API might help.

[fweth]

I think it's the future, but currently only supported by Chrome IIRC?

[dai-shi]

Yeah, probably.

FYI: https://twitter.com/t6adev/status/1780801492964020248

[fweth]

Thank you!

[jeduan]

Just in case, Safari is now shipping View Transitions in their Technical Preview.

[fweth]

I think I made it work :)) In both, Waku and Next.js, here is the Waku version (and here my corresponding post in the Next.js discussion):

"use client";

import { useMemo, useState, useEffect, useRef } from "react";
import { useRouter_UNSTABLE as useRouter } from "waku";

export function Transition({ children }) {
  const [exiting, setExiting] = useState(false);
  const { path } = useRouter();
  const cloneRef = useRef();
  const innerRef = useRef();
  const outerRef = useRef();
  useMemo(
    function () {
      if (!innerRef.current) return;
      setExiting(true);
      cloneRef.current = innerRef.current;
    },
    [path]
  );
  useEffect(
    function () {
      if (exiting) {
        outerRef.current.appendChild(cloneRef.current);
        cloneRef.current.style.transition = "none";
        cloneRef.current.style.opacity = 1;
        window.setTimeout(function () {
          cloneRef.current.style.transition = "opacity 400ms";
          cloneRef.current.style.opacity = 0;
        }, 100);
        window.setTimeout(function () {
          setExiting(false);
          cloneRef.current.remove();
        }, 500);
        return () => cloneRef.current.remove();
      }
      window.setTimeout(function () {
        if (!innerRef.current) return;
        innerRef.current.style.opacity = 1;
      }, 100);
    },
    [exiting]
  );
  return (
    <div ref={outerRef}>
      {!exiting && (
        <div
          key={path}
          ref={innerRef}
          style={{ opacity: 0, transition: "opacity 400ms" }}
        >
          {children}
        </div>
      )}
    </div>
  );
}