PageRevealEvent

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

PageRevealEvent 事件对象在 pagereveal 事件的处理程序函数中可用。

在跨文档导航期间，它允许你从被导航到的文档中操作相关的 视图过渡（提供访问相关 ViewTransition 对象的权限），如果视图过渡是由导航触发的。

在视图过渡之外，此事件也有用，例如触发启动动画或报告页面浏览量。它等效于跨文档导航后运行的第一个 Window.requestAnimationFrame()，如果你要在文档的 <head> 中触发 requestAnimationFrame()。例如，如果你在 <head> 中运行以下 reveal() 函数

js
function reveal() {
  // Include startup animation here
}
/* This will fire in the first rendered frame after loading */
requestAnimationFrame(() => reveal());

/* This will fire if the page is restored from BFCache */
window.onpagehide = () => requestAnimationFrame(() => reveal());

构造函数

PageRevealEvent()

创建一个新的 PageRevealEvent 对象实例。

实例属性

viewTransition 只读

包含一个 ViewTransition 对象，表示跨文档导航的活动视图过渡。

示例

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

注意： 请查看 List of Chrome DevRel team members 以获取此代码来源的实时演示。

规范

规范
HTML 标准
# the-pagerevealevent-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅