Transizioni fluide con l'API View Transizione

Bramus

L'API View Transition ti consente di creare transizioni visive senza interruzioni tra diverse visualizzazioni sul tuo sito web. In questo modo, gli utenti possono navigare nel tuo sito in modo più coinvolgente dal punto di vista visivo, indipendentemente dal fatto che sia stato creato come applicazione a più pagine (AMP) o come applicazione a pagina singola (APS).

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

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

Implementare le transizioni di visualizzazione

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

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

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

La differenza tra i due tipi è il modo in cui vengono attivati.

Transizioni tra visualizzazioni dello stesso documento

Quando una transizione di visualizzazione viene eseguita in un singolo documento, si parla di transizione di visualizzazione all'interno dello stesso documento. Ciò si verifica solitamente nelle applicazioni a pagina singola (APS). Le transizioni tra le visualizzazioni dello stesso documento sono supportate in Chrome a partire dalla versione 111.

Come attivare

Attiva le transizioni tra visualizzazioni 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 riportato di seguito è un'applicazione SPA che utilizza le transizioni di visualizzazione dello stesso documento per animare le schede man mano che vengono aggiunte o rimosse nuove schede.

Inizia a creare

Consulta la pagina della documentazione dedicata per scoprire tutto ciò che c'è da sapere sulle transizioni tra visualizzazioni dello stesso documento.

Creare transizioni tra visualizzazioni dello stesso documento

Transizioni tra visualizzazioni di documenti

Quando si verifica una transizione tra due documenti diversi, si parla di transizione della visualizzazione tra documenti. Questo è un comportamento tipico dei MPA. Le transizioni tra visualizzazioni di documenti sono supportate in Chrome 126 e versioni successive.

Come attivare

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

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

@view-transition {
  navigation: auto;
}

Esempio

Il seguente esempio di Stack Navigator è un MPA che utilizza transizioni di visualizzazione tra documenti diversi. A seconda che tu stia andando più in profondità nella navigazione o meno, le pagine vengono inserite nell'elenco o vengono chiuse.

Inizia a creare

Scopri tutto ciò che c'è da sapere sulle transizioni tra le visualizzazioni dei documenti.

Creare transizioni di visualizzazione tra documenti