Transizioni tra documenti

Le transizioni di visualizzazione tra documenti ti consentono di creare transizioni fluide, simili a quelle delle app, tra diverse pagine di un'applicazione multipagina (MPA). Per impostazione predefinita, il browser esegue una dissolvenza incrociata, ma puoi personalizzarla in base all'estetica del tuo sito.

Procedura di implementazione

1. Attiva le transizioni di visualizzazione tra documenti

Sia la pagina di origine che quella di destinazione devono attivare le transizioni di visualizzazione affinché il browser le attivi durante la navigazione.

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. Personalizza le animazioni di transizione (facoltativo)

Puoi scegliere come target gli stati precedente e nuovo della transizione utilizzando pseudo-elementi per creare effetti come slide o rivelazioni.

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. Crea transizioni direzionali (facoltativo)

Potresti voler utilizzare effetti di transizione diversi a seconda delle pagine tra cui stai navigando. Ad esempio, quando passi da una home page a una pagina di contatto, potresti voler applicare l'effetto di nuovi contenuti provenienti da destra. Quando torni alla home page, non avrebbe senso avere lo stesso effetto.

Se la pagina a cui stai navigando avrà sempre lo stesso tipo di transizione, indipendentemente da come ci arrivi, puoi specificarlo con types nella regola @view-transition.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

Puoi anche specificare in modo condizionale i tipi di transizione all'interno di un listener di eventi per pagereveal.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

Poi, utilizza il selettore pseudo :active-view-transition-type() per applicare le diverse animazioni per ogni tipo.

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

Strategie di riserva

Se un browser non supporta le transizioni di visualizzazione o le transizioni di visualizzazione tra documenti, eseguirà una navigazione standard istantanea tra le pagine. Le transizioni di visualizzazione tra documenti sono un potenziamento progressivo; la funzionalità di base del sito rimane invariata.

Per verificare il supporto in JavaScript:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

Se un browser non supporta l'API Navigation, non potrai utilizzarla per determinare un tipo di transizione. Utilizza un metodo alternativo per determinare il tipo di transizione o fornisci un tipo di transizione di riserva. In caso contrario, il browser eseguirà una navigazione nelle pagine istantanea standard.

Per verificare il supporto in JavaScript:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}