React の `<ViewTransition>` コンポーネントで宣言的にページ遷移アニメーションを追加する

{
  "dependencies": {
    "react": "experimental",
    "react-dom": "experimental"
  }
}

const nextConfig = {
    experimental: {
        viewTransition: true,
    },
}

import { unstable_ViewTransition as ViewTransition } from "react";

<ViewTransition>{condition ? <ComponentA /> : <ComponentB />}</ViewTransition>

import { useState, startTransition, unstable_ViewTransition as ViewTransition } from "react";
 
export function App() {
  const [page, setPage] = useState("A");
 
  const changePage = (newPage: string) => {
    startTransition(() => {
      setPage(newPage);
    });
  };
 
  return (
    <>
      <button onClick={() => changePage("A")}>A</button>
      <button onClick={() => changePage("B")}>B</button>
      <ViewTransition>{page === "A" ? <PageA /> : <PageB />}</ViewTransition>
    </>
  );
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
 
@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
 
::view-transition-old(foo) {
  animation: slide-out 0.3s ease-out;
}
 
::view-transition-new(foo) {
  animation: slide-in 0.3s ease-out;
}

<ViewTransition name="foo">
  {page === "A" ? <PageA /> : <PageB />}
</ViewTransition>

import {
  Suspense,
  unstable_ViewTransition as ViewTransition,
  use,
} from "react";
let cache = new Map();
 
export function fetchData(url: string) {
  if (!cache.has(url)) {
    cache.set(url, getData(url));
  }
  return cache.get(url);
}
 
async function getData(url: string) {
  if (url === "todos") {
    return await fetchTodos();
  } else {
    throw Error("Not implemented");
  }
}
 
const fetchTodos = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  const todos = [
    { id: 1, title: "Buy milk" },
    { id: 2, title: "Take out the trash" },
    { id: 3, title: "Wash dishes" },
  ];
  return todos;
};
 
function PageA() {
  const todos = use(fetchData("todos"));
  return (
    <div>
      <h1>Page A</h1>
 
      <ul>
        {todos.map((todo: any) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}
 
const Skelton = () => {
  return <div>Loading...</div>;
};
 
function App() {
  return (
    <>
      <ViewTransition>
        <Suspense fallback={<Skelton />}>
          <PageA />
        </Suspense>
      </ViewTransition>
    </>
  );
}
 
export default App;