useViewTransitionState
当存在一个活动的视图转换到指定位置时,此钩子返回 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>
);
}