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