Transizioni fluide con l'API View Transizione

Bramus

L'API View Transition ti consente di creare transizioni visive fluide tra le diverse visualizzazioni del tuo sito web. In questo modo, l'esperienza utente è più coinvolgente dal punto di vista visivo durante la navigazione nel sito, indipendentemente dal fatto che sia creato come applicazione multipagina (MPA) o applicazione a pagina singola (SPA).

Le situazioni tipiche in cui utilizzeresti le transizioni di visualizzazione includono:

• Un'immagine in miniatura in una pagina di scheda di prodotto che si trasforma in un'immagine del prodotto a grandezza naturale nella pagina dei dettagli del prodotto.
• Una barra di navigazione fissa che rimane in posizione mentre passi da una pagina all'altra.
• Una griglia con elementi che cambiano posizione man mano che filtri.

Implementare le transizioni di visualizzazione

Le transizioni di visualizzazione non sono legate a un'architettura o a un framework di applicazioni specifici e possono essere attivate non solo su un singolo documento, ma anche tra due documenti diversi.

Entrambi i tipi di transizione di visualizzazione si basano sugli stessi componenti di base e principi:

1. Il browser acquisisce istantanee del vecchio e del nuovo stato.
2. Il DOM viene aggiornato mentre il rendering è soppresso.
3. Le transizioni sono basate sulle animazioni CSS.

L'unica differenza tra i due tipi è il modo in cui vengono attivati.

Transizioni di visualizzazione nello stesso documento

Quando una transizione di visualizzazione viene eseguita su un singolo documento, viene chiamata transizione di visualizzazione nello stesso documento. In genere è così nelle applicazioni a pagina singola (SPA). Le transizioni di visualizzazione nello stesso documento sono supportate in Chrome a partire dalla versione 111.

Come attivare

Attiva le transizioni di visualizzazione dello stesso documento chiamando document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(>() = updateTheDOMSomehow());
}

Esempio

L'esempio di schede seguente è una SPA che utilizza le transizioni di visualizzazione nello stesso documento per animare le schede quando ne vengono aggiunte o rimosse di nuove.

Inizia a creare

Consulta la pagina della documentazione dedicata per scoprire tutto quello che c'è da sapere sulle transizioni di visualizzazione nello stesso documento.

Creare transizioni di visualizzazione nello stesso documento

Transizioni di visualizzazione tra documenti

Quando una transizione di visualizzazione si verifica tra due documenti diversi, viene chiamata transizione di visualizzazione tra documenti. Questo è tipico delle MPA. Le transizioni di visualizzazione tra documenti sono supportate in Chrome 126 e versioni successive.

Come attivare

Le transizioni di visualizzazione tra documenti vengono attivate da una navigazione multiorigine tra documenti della stessa origine, se entrambe le pagine hanno attivato la funzionalità. In altre parole, non esiste un'API da chiamare per avviare una transizione di visualizzazione tra documenti. Quando un utente fa clic su un link, il clic attiva la transizione di visualizzazione.

Per attivare la funzionalità, utilizza il seguente snippet CSS:

@view-transition {
  navigation: auto;
}

Esempio

Il seguente esempio di Stack Navigator è un'app multipagina che utilizza transizioni di visualizzazione cross-document tra due documenti diversi. A seconda che tu stia approfondendo la navigazione o meno, le pagine vengono inserite o rimosse dalla pila.

Inizia a creare

Scopri tutto quello che c'è da sapere sulle transizioni di visualizzazione tra documenti.

Creare transizioni di visualizzazione tra documenti