L'API View Transizione ti offre la possibilità di creare transizioni visive senza interruzioni tra le diverse visualizzazioni sul tuo sito web. Ciò crea un'esperienza visivamente più coinvolgente per gli utenti mentre navigano sul tuo sito, indipendentemente dal fatto che sia sviluppato come un'applicazione a più pagine (MPA) o come un'applicazione a pagina singola (SPA).
Ecco alcuni casi in cui le transizioni di visualizzazione vengono usate generalmente:
- Un'immagine in miniatura su una pagina della scheda di prodotto che diventa un'immagine prodotto a grandezza originale nella pagina dei dettagli del prodotto.
- Una barra di navigazione fissa che rimane attiva quando passi da una pagina all'altra.
- Una griglia con elementi che si spostano mentre filtri i contenuti.
Implementare le transizioni delle visualizzazioni
Le transizioni delle visualizzazioni non sono legate a un'architettura dell'applicazione o a un framework specifici e possono essere attivate non solo su un singolo documento e anche tra due documenti diversi.
Entrambi i tipi di transizione delle visualizzazioni si basano sugli stessi componenti e principi di base:
- Il browser acquisisce istantanee del vecchio e del nuovo stato.
- Il DOM viene aggiornato mentre il rendering viene soppresso.
- Le transizioni sono basate sulle animazioni CSS.
L'unica differenza tra i due tipi è il modo in cui vengono attivati.
Transizioni della visualizzazione dello stesso documento
Quando una transizione della visualizzazione viene eseguita su un singolo documento, prende il nome di transizione della visualizzazione dello stesso documento. Questa situazione si verifica in genere nelle applicazioni a pagina singola (APS). Le transizioni della visualizzazione dello stesso documento sono supportate in Chrome a partire dalla versione 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
Il seguente esempio di schede è un'APS che utilizza transizioni nella visualizzazione dello 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 ciò che c'è da sapere sulle transizioni della visualizzazione dello stesso documento.
Creare transizioni dalla visualizzazione dello stesso documento
Transizioni della visualizzazione più documenti
Quando si verifica una transizione della visualizzazione tra due documenti diversi, si parla di transizione della visualizzazione di più documenti. Questo è un tipico esempio di MPA. Le transizioni tra le visualizzazioni tra documenti sono supportate in Chrome 126 e versioni successive.
Come attivare
Le transizioni tra le visualizzazioni tra documenti vengono attivate da una navigazione tra documenti con la stessa origine, se sono state attivate entrambe le pagine. In altre parole, non esiste un'API da chiamare per avviare una transizione della visualizzazione di più documenti. Quando un utente fa clic su un link, il clic attiva la transizione della visualizzazione.
Per l'attivazione in alto, utilizza il seguente snippet CSS:
@view-transition {
navigation: auto;
}
Esempio
Il seguente esempio di navigazione stack è una MPA che utilizza le transizioni della visualizzazione tra documenti tra due documenti diversi. A seconda che tu stia addentrando nella navigazione più in dettaglio o meno, le pagine vengono inserite nell'elenco filtri o si separano.
Inizia a creare
Scopri tutto quello che c'è da sapere sulle transizioni delle visualizzazioni tra documenti.