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";
}
}
});
注意：請參閱Chrome DevRel 團隊成員列表以獲取此程式碼所引用的即時演示。
規範
| 規範 |
|---|
| HTML # the-pagerevealevent-interface |
瀏覽器相容性
載入中…