`unstable_useViewTransitionState`

型別宣告

declare function unstable_useViewTransitionState(
  to: To,
  opts: { relative?: "route" : "path" } = {}
): boolean;

type To = string | Partial<Path>;

interface Path {
  pathname: string;
  search: string;
  hash: string;
}

當有檢視轉場到指定位置時，此 Hook 會傳回 true。這可以用在為元素套用較細緻的樣式，以進一步自訂檢視轉場。這需要透過 Link (或 Form、navigate 或 submit 呼叫) 上的 unstable_viewTransition 道具，為特定導航啟用檢視轉場。

考慮在清單中點擊一張圖片，你需要在目標頁面上將它展開成為英雄圖片

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