Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
PageSwapEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
DasPageSwapEvent-Ereignisobjekt ist innerhalb von Handlerfunktionen für daspageswap Ereignis verfügbar.
Daspageswap Ereignis wird ausgelöst, wenn Sie zwischen Dokumenten navigieren und das vorherige Dokument kurz vor dem Entladen steht. Während einer Navigation über Dokumente hinweg ermöglicht dasPageSwapEvent-Ereignisobjekt das Manipulieren des zugehörigenView Transition (bietet Zugriff auf das relevanteViewTransition-Objekt) von dem Dokument, von dem aus navigiert wird, wenn die Navigation eine View-Transition ausgelöst hat. Es bietet auch Zugriff auf Informationen über den Navigationstyp sowie aktuelle und Ziel-Dokumente.
Konstruktor
PageSwapEvent()Erstellt eine neue Instanz eines
PageSwapEvent-Objekts.
Instanzeigenschaften
activationSchreibgeschütztEnthält ein
NavigationActivation-Objekt, das den Navigationstyp und die aktuellen sowie die Ziel-Dokument-Historieneinträge für eine Navigation innerhalb derselben Herkunft enthält. Wenn die Navigation eine Cross-Origin-URL irgendwo in der Umleitungskette hat, wirdnullzurückgegeben.viewTransitionSchreibgeschütztEnthält ein
ViewTransition-Objekt, das die aktive View-Transition für die Navigation über Dokumente hinweg darstellt.
Beispiele
window.addEventListener("pageswap", async (e) => { // Only run this if an active view transition exists if (e.viewTransition) { const currentUrl = e.activation.from?.url ? new URL(e.activation.from.url) : null; const targetUrl = new URL(e.activation.entry.url); // Going from profile page to homepage // ~> The big img and title are the ones! if (isProfilePage(currentUrl) && isHomePage(targetUrl)) { // 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 view-transition-names after snapshots have been taken // Stops naming conflicts resulting from the page state persisting in BFCache await e.viewTransition.finished; document.querySelector(`#detail main h1`).style.viewTransitionName = "none"; document.querySelector(`#detail main img`).style.viewTransitionName = "none"; } // Going to profile page // ~> The clicked items are the ones! if (isProfilePage(targetUrl)) { const profile = extractProfileNameFromUrl(targetUrl); // 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 view-transition-names after snapshots have been taken // Stops naming conflicts resulting from the page state persisting in BFCache await e.viewTransition.finished; document.querySelector(`#${profile} span`).style.viewTransitionName = "none"; document.querySelector(`#${profile} img`).style.viewTransitionName = "none"; } }});Hinweis:Sehen SieListe der Chrome DevRel-Teammitglieder für die Live-Demo, aus der dieser Code stammt.
Spezifikationen
| Specification |
|---|
| HTML # the-pageswapevent-interface |