Transizioni di navigazione direzionale

Le applicazioni a pagina singola (SPA) danno l'impressione di navigare sostituendo i contenuti della pagina senza passare a una nuova pagina. Per impostazione predefinita, i contenuti vengono semplicemente sostituiti, senza transizioni. Le transizioni direzionali possono rafforzare visivamente una relazione spaziale tra le visualizzazioni.

Facendo scorrere i nuovi contenuti dalla direzione in cui l'utente si sta muovendo, crei una mappa mentale della struttura dell'applicazione. Ad esempio, un sito di prodotti potrebbe mostrare una transizione verso destra per "avanti" e verso sinistra per "indietro", oppure una presentazione potrebbe mostrare una transizione verso l'alto e verso il basso per mostrare le slide successive e precedenti.

Procedura di implementazione

1. Rileva la direzione di navigazione: determina se l'utente si sta spostando "avanti" o "indietro" nel flusso dell'applicazione. Il modo in cui rilevi la direzione dipende dal caso d'uso.
2. Attiva la transizione con i tipi: passa la direzione in un array types a document.startViewTransition() per classificare la transizione.
3. Definisci animazioni direzionali con CSS: utilizza la pseudoclasse :active-view-transition-type() per applicare animazioni specifiche in base al tipo di navigazione.

Definizione dei fotogrammi chiave

Definisci le animazioni di scorrimento da e verso ogni direzione. Per ottenere le migliori prestazioni, anima le modifiche di posizione utilizzando la proprietà transform o le singole proprietà di trasformazione, scale, rotate e translate. Anche opacity è generalmente efficace, ma evita di animare altre proprietà CSS senza prima verificare che non attivino il layout o la pittura.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

Configura le impostazioni di animazione condivise

Utilizza il selettore ::view-transition-group(root) per applicare le impostazioni di animazione condivise tra tutte le transizioni.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

Applicazione di animazioni direzionali

Utilizza la pseudoclasse active-view-transition-type per scegliere come target le visualizzazioni di transizione in modo specifico quando è attivo il tipo "avanti" o "indietro".

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

Attivazione della transizione

Durante la navigazione, passa il tipo appropriato al metodo startViewTransition.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

Accessibilità

Rispetta sempre le preferenze dell'utente per il movimento ridotto disattivando o semplificando le animazioni.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

Strategie di riserva

L'API View Transitions è un potenziamento progressivo. Nei browser non supportati, document.startViewTransition sarà undefined. Devi inserire la logica di navigazione in un controllo di rilevamento delle funzionalità per assicurarti che l'aggiornamento del DOM avvenga comunque immediatamente senza animazione, come mostrato in questa funzione helper.

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}