Window: pagereveal 事件

实验性： 这是一种 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

pagereveal 事件在首次渲染文档时触发，无论是在网络加载新文档时，还是在激活文档时（无论是从 后退/前进缓存 (bfcache) 或 预渲染）。

这在跨文档（MPA）视图转换 中很有用，用于在导航的入站页面中操控活动转换。例如，您可能希望跳过转换，或通过 JavaScript 自定义入站转换动画。

语法

在像 addEventListener() 这样的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("pagereveal", (event) => {});
onpagereveal = (event) => {};

事件类型

一个 PageRevealEvent。继承自 Event。

Event PageRevealEvent

事件属性

PageRevealEvent.viewTransition 只读

返回 ViewTransition 对象，该对象表示入站跨文档视图转换，如果事件触发时有一个活动转换，则返回该对象。如果不是这种情况，它返回 null。

示例

js
window.addEventListener("pagereveal", async (e) => {
  // If the "from" history entry does not exist, return
  if (!navigation.activation.from) return;

  // Only run this if an active view transition exists
  if (e.viewTransition) {
    const fromUrl = new URL(navigation.activation.from.url);
    const currentUrl = new URL(navigation.activation.entry.url);

    // Went from profile page to homepage
    // ~> Set VT names on the relevant list item
    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
      const profile = extractProfileNameFromUrl(fromUrl);

      // Set view-transition-name values on the elements to animate
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "avatar";

      // Remove names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }

    // Went to profile page
    // ~> Set VT names on the main title and image
    if (isProfilePage(currentUrl)) {
      // Set view-transition-name values on the elements to animate
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // Remove names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }
  }
});

注意： 有关此代码的现场演示，请参阅 Chrome DevRel 团队成员列表。

规范

规范
HTML 标准
# event-pagereveal

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅