useViewTransitionState

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

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

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