useViewTransitionState

useViewTransitionState

当指定位置有活动的 View Transition 时，此钩子返回 true。这可用于将更细粒度的样式应用于元素，以进一步自定义视图转换。这要求已通过 Link（或 Form、NavLink、navigate 或 submit 调用）上的 viewTransition 属性为给定导航启用视图转换。

考虑单击列表中需要扩展为目标页面上的大图像的图像：

function NavImage({ src, alt, id }) {
  const to = `/images/${idx}`;
  const vt = useViewTransitionState(href);
  return (
    <Link to={to} viewTransition>
      <img
        src={src}
        alt={alt}
        style={{
          viewTransitionName: vt ? "image-expand" : "",
        }}
      />
    </Link>
  );
}