unstable_useViewTransitionState

このフックは、指定された場所にアクティブな View Transition がある場合に true を返します。これを使用すると、要素にさらに細かいスタイルを適用して、ビューの遷移をさらにカスタマイズできます。これには、Link (または FormNavLinknavigate、または submit コール)の unstable_viewTransition プロパティを使用して、指定されたナビゲーションに対してビューの遷移が有効になっている必要があります。

リスト内の画像をクリックして、宛先ページのヒーロー画像に展開する必要がある場合を考えてみましょう。

function NavImage({ src, alt, id }) {
  const to = `/images/${idx}`;
  const vt = unstable_useViewTransitionState(href);
  return (
    <Link to={to} unstable_viewTransition>
      <img
        src={src}
        alt={alt}
        style={{
          viewTransitionName: vt ? "image-expand" : "",
        }}
      />
    </Link>
  );
}