Window : évènement pagereveal

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

L'évènement pagereveal est émis lorsqu'un document est rendu pour la première fois, soit lors du chargement d'un nouveau document depuis le réseau, soit lors de l'activation d'un document (soit depuis le cache avant/arrière (bfcache), soit depuis le prérendu).

Cela est utile dans le cas des transitions de vue entre documents (MPA) pour manipuler une transition active depuis la page entrante d'une navigation. Par exemple, vous pourriez vouloir ignorer la transition ou personnaliser l'animation de la transition entrante via JavaScript.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

addEventListener("pagereveal", (event) => { })

onpagereveal = (event) => { }

Type d'évènement

Un objet PageRevealEvent. Hérite de Event.

Propriétés de l'évènement

PageRevealEvent.viewTransition Lecture seule: Retourne l'objet ViewTransition représentant la transition de vue entre documents entrante, si une transition est active lorsque l'évènement est déclenché. Sinon, il retourne null.

Exemples

window.addEventListener("pagereveal", async (e) => {
  // Si l'entrée d'historique "from" n'existe pas, retourner
  if (!navigation.activation.from) return;

  // Ne s'exécute que si une transition de vue active existe
  if (e.viewTransition) {
    const fromUrl = new URL(navigation.activation.from.url);
    const currentUrl = new URL(navigation.activation.entry.url);

    // Passage de la page de profil à la page d'accueil
    // ~> Définir les noms VT sur l'élément de liste pertinent
    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
      const profile = extractProfileNameFromUrl(fromUrl);

      // Définir les valeurs de view-transition-name sur les éléments à animer
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "avatar";

      // Supprimer les noms après que les instantanés ont été pris
      // afin d'être prêt pour la prochaine navigation
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }

    // Passage à la page de profil
    // ~> Définir les noms VT sur le titre principal et l'image
    if (isProfilePage(currentUrl)) {
      // Définir les valeurs de view-transition-name sur les éléments à animer
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // Supprimer les noms après que les instantanés ont été pris
      // afin d'être prêt pour la prochaine navigation
      await e.viewTransition.ready;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }
  }
});

Note : Voir la liste des membres de l'équipe Chrome DevRel ^(angl.) pour la démo en direct dont ce code est extrait.

Spécifications

Specification
HTML # event-pagereveal

Compatibilité des navigateurs

Voir aussi

Utiliser l'API de transition de vue
L'évènement pageswap

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 17 mars 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content