React Router v7 已發佈。 查看文件
useViewTransitionState

useViewTransitionState

當指定位置有正在進行的視圖轉換時,此 Hook 會回傳 true。這可以用來將更細緻的樣式套用到元素,以進一步自訂視圖轉換。這需要透過 Link(或 FormNavLinknavigatesubmit 呼叫)上的 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>
  );
}
文件和範例以 MIT