Transizioni fluide con l'API View Transizione

Bramus

L'API View Transizione ti consente di creare transizioni visive fluide tra le diverse viste del tuo sito web. Ciò crea un'esperienza visivamente più coinvolgente per gli utenti che navigano nel tuo sito, indipendentemente dal fatto che sia stato realizzato come applicazione a più pagine (MPA) o come applicazione a pagina singola (APS).

Le situazioni tipiche in cui utilizzi le transizioni di tipo "Visualizza" includono:

• Un'immagine in miniatura su una pagina della scheda di prodotto che diventa un'immagine prodotto a dimensioni originali nella pagina dei dettagli del prodotto.
• Una barra di navigazione fissa che rimane fissa mentre passi da una pagina all'altra.
• Una griglia con elementi che si spostano di posizioni mentre li filtri.

Implementare le transizioni delle viste

Le transizioni delle viste non sono legate a un'architettura o a un framework specifici dell'applicazione e possono essere attivate non solo su un singolo documento e anche tra due documenti diversi.

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

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 su animazioni CSS.

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

Transizioni della visualizzazione nello stesso documento

Quando una transizione di visualizzazione viene eseguita su un singolo documento, viene chiamata transizione della vista stesso documento. Ciò si verifica solitamente nelle applicazioni a pagina singola (APS). Le transizioni di visualizzazione dello stesso documento sono supportate in Chrome da Chrome 111.

Come attivare

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

Inizia a creare

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

Creare transizioni di visualizzazione dello stesso documento

Transizioni della visualizzazione tra documenti

Quando si verifica una transizione tra due documenti diversi, si parla di transizione della visualizzazione tra documenti. È un comportamento 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 tra documenti della stessa origine, se entrambe le pagine sono attivate. 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 della visualizzazione.

Per attivare la 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 tra due documenti diversi. A seconda che tu stia navigando più a fondo o meno, le pagine vengono spostate nell'elenco filtri o scompaiono.

Inizia a creare

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

Creare transizioni di visualizzazione tra documenti