useViewTransitionState

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

¥This hook returns true when there is an active View Transition to the specified location. This can be used to apply finer-grained styles to elements to further customize the view transition. This requires that view transitions have been enabled for the given navigation via the viewTransition prop on the Link (or the Form, NavLink, navigate, or submit call).

假设点击列表中的一张图片，需要将其展开为目标页面上的英雄图片：

¥Consider clicking on an image in a list that you need to expand into the hero image on the destination page:

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