`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;
}

當指定的位址產生檢視轉場時，此掛勾回傳 true。這可用於將更細緻的樣式套用至元素，以進一步自訂檢視轉場。這需要透過 Link (或 Form、navigate 或 submit 呼叫) 上的 unstable_viewTransition prop，針對指定的導航啟用檢視轉場。

考慮清單中有一張圖片，而你需要在目標頁面上將此圖片擴充為大圖片

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>
  );
}