React moveBefore + ViewTransition

moveBefore.tsx

// As of today, moveBefore is only enabled in experimental releases of React
// Example:
//    "react": "0.0.0-experimental-0ca3deeb-20250311",
//    "react-dom": "0.0.0-experimental-0ca3deeb-20250311"


import {
  ReactNode,
  useState,
  startTransition,
  unstable_ViewTransition as ViewTransition,
} from "react";
import CodeBlock from "@theme/CodeBlock";
import Layout from "@theme/Layout";

function RickRoll() {
  return (
    <iframe
      width="360"
      height="220"
      src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
      title="Rickroll"
      frameBorder="0"
      // allow="autoplay; encrypted-media"
      allowFullScreen
      style={{ padding: 10 }}
    />
  );
}

export default function Home(): ReactNode {
  const [state, setState] = useState(false);
  const toggle = () => startTransition(() => setState((b) => !b));

  return (
    <Layout>
      <div style={{ padding: 50 }}>
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            padding: 10,
          }}
        >
          <button onClick={toggle} style={{ fontSize: 80, marginRight: 40 }}>
            Swap
          </button>
          <div>
            <CodeBlock language="tsx">
              {`<ViewTransition name="test">
  <RickRoll key={"${state ? "1" : "2"}"} />
  <RickRoll key={"${state ? "2" : "1"}"} />
</ViewTransition>`}
            </CodeBlock>
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "row" }}>
          <ViewTransition name="test">
            <RickRoll key={state ? "1" : "2"} />
            <RickRoll key={state ? "2" : "1"} />
          </ViewTransition>

          <style>{`
    ::view-transition-group(test),
    ::view-transition-new(test),
    ::view-transition-old(test) {
      animation-duration: 1s;
    }
  `}</style>
        </div>
      </div>
    </Layout>
  );
}