useViewTransitionState

useViewTransitionState

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