In occasione del Google I/O 2024, ho annunciato il passaggio successivo per le transizioni delle visualizzazioni: le transizioni della visualizzazione tra documenti per le applicazioni con più pagine (MPA).
Oltre a questo, ho condiviso alcuni miglioramenti che ti consentono di lavorare più facilmente con le transizioni di tipo visualizzazione in generale.
- Condivisione di stili di animazione tra pseudo elementi di transizione della visualizzazione con
view-transition-class
. - Transizioni della visualizzazione selettiva con tipi attivi.
Questi miglioramenti si applicano sia alle transizioni della visualizzazione dello stesso documento per le applicazioni a pagina singola (APS) sia alle transizioni della visualizzazione tra documenti per MPA.
Transizioni della visualizzazione più documenti per gli MPA
In Chrome 111, il team di Chrome ha distribuito transizioni della visualizzazione dello stesso documento per le applicazioni a pagina singola, una funzionalità molto apprezzata dalla community della creazione di siti web.
È fantastico vedere cosa hanno realizzato molti di voi con le transizioni delle visualizzazioni. Che spaziano dalle implementazioni tipiche che "far ingrandirsi la miniatura nella foto grande" a esperienze immersive altamente personalizzate come questa di Airbnb. Formidabile!
Tuttavia, l'implementazione iniziale richiedeva di creare un'APS per utilizzare le transizioni delle visualizzazioni. A partire da Chrome 126, non è più così. Le transizioni delle visualizzazioni sono ora abilitate per impostazione predefinita per le navigazioni con la stessa origine. Ora puoi creare una transizione di visualizzazione tra due documenti diversi che hanno la stessa origine.
Per attivare le transizioni della visualizzazione tra documenti, è necessario attivare entrambe le estremità. Per farlo, utilizza la regola at @view-transition
e imposta il descrittore navigation
su auto
.
@view-transition {
navigation: auto;
}
Le transizioni della visualizzazione tra documenti utilizzano gli stessi componenti di base e gli stessi principi delle transizioni tra le visualizzazioni degli stessi documenti. Gli elementi a cui è stato applicato un view-transition-name
vengono acquisiti e puoi personalizzare le animazioni utilizzando le animazioni CSS.
Per personalizzare le transizioni della visualizzazione tra documenti, utilizza gli eventi pageswap
e pagereveal
, che ti consentono di accedere all'oggetto Visualizza transizione.
- Con
pageswap
puoi apportare alcune modifiche dell'ultimo minuto alla pagina in uscita immediatamente prima dell'acquisizione delle istantanee precedenti. - Con
pagereveal
puoi personalizzare la nuova pagina prima che inizi il rendering dopo l'inizializzazione.
In entrambi gli eventi hai accesso a un oggetto NavigationActivation
per personalizzare una transizione della visualizzazione tra documenti in base alle voci precedenti e nuove della cronologia delle destinazioni o al tipo di navigazione.
Inoltre, puoi attendere il caricamento dei contenuti con il blocco della visualizzazione e fare affidamento sul prerendering per migliorare il tempo di caricamento prima dell'esecuzione della transizione di visualizzazione.
Demo
Questa demo di Stack Navigator combina tutte queste funzionalità (insieme ad alcuni miglioramenti).
pagereveal
in base alle informazioni di attivazione della navigazione. Viene utilizzato anche il prerendering.Questa è una MPA con navigazioni tra documenti, ospitata sulla stessa origine. Se utilizzi pagereveal
, il tipo di animazione viene determinato in base alle voci precedenti e nuove della cronologia delle destinazioni.
window.addEventListener("pagereveal", async (e) => {
if (e.viewTransition) {
// Determine animation type based on the old/new history entries
const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
document.documentElement.dataset.transition = transitionClass;
// Cleanup after transition ran
await e.viewTransition.finished;
delete document.documentElement.dataset.transition;
}
});
Leggi la documentazione
Per saperne di più su come attivare e personalizzare le transizioni delle visualizzazioni tra documenti, consulta la nostra documentazione sulle transizioni delle visualizzazioni tra documenti.
Visualizza i miglioramenti delle transizioni
Oltre a inviare le transizioni delle visualizzazioni tra documenti per MPA, Chrome include anche alcuni perfezionamenti per lavorare con le transizioni delle visualizzazioni in generale.
Questi miglioramenti si applicano alle transizioni della visualizzazione dello stesso documento per l'APS e delle transizioni della visualizzazione più documenti per MPA.
Condividi stili di animazione con view-transition-class
Supporto dei browser
- 125
- 125
- x
- x
Finora, quando si animavano più istantanee nello stesso modo, era necessario scegliere come target ogni istantanea singolarmente, ripetendo il relativo pseudo-selettore per ogni elemento che ha un view-transition-name
univoco.
Con view-transition-class
ora puoi aggiungere un nome condiviso a tutti gli snapshot. Utilizza questo nome condiviso negli pseudo selettori per scegliere come target tutti gli snapshot corrispondenti. Ciò si traduce in selettori molto più semplici, che scalano automaticamente da uno a più elementi.
#cards-wrapper > div {
view-transition-class: card;
}
html::view-transition-group(.card) {
animation-timing-function: var(--bounce);
}
Il seguente esempio di schede utilizza view-transition-class
per applicare la stessa durata dell'animazione a più istantanee utilizzando un solo selettore.
view-transition-class
, viene applicato lo stesso animation-timing-function
a tutte le carte tranne quelle aggiunte o rimosse.Per saperne di più su view-transition-class
, leggi la documentazione dedicata su view-transition-class
.
Transizioni della visualizzazione selettiva con tipi attivi
Un altro perfezionamento per visualizzare le transizioni è l'introduzione dell'aggiunta di tipi a una transizione di visualizzazione durante l'acquisizione e l'esecuzione. In questo modo è più facile lavorare con varie transizioni di visualizzazione sulla stessa pagina, senza che le dichiarazioni di una persona cambino l'altra.
Ad esempio, quando passi alla pagina successiva o precedente in una sequenza di impaginazione, potresti voler utilizzare animazioni diverse a seconda che tu stia andando a una pagina superiore o a una pagina inferiore rispetto alla sequenza.
Prima dei tipi attivi, potevi aggiungere classi al DOM e rispondere a queste classi nel tuo CSS. Tuttavia, dovrai eseguire la pulizia anche al termine delle transizioni.
Con i tipi di transizione della visualizzazione puoi ottenere lo stesso risultato, con l'ulteriore vantaggio di avere la pulizia automatica di questi tipi di dati una volta terminata la transizione della visualizzazione. I tipi si applicano solo all'acquisizione o all'esecuzione della transizione.
Per le transizioni della visualizzazione dello stesso documento, passa il types
al metodo startViewTransition
che ora accetta un oggetto. update
è la funzione di callback che aggiorna il DOM, mentre types
è una sequenza di stringhe.
const direction = determineBackwardsOrForwards();
const t = document.startViewTransition({
update: updateTheDOMSomehow,
types: ['slide', direction],
}););
Per una transizione della visualizzazione tra documenti, imposta i tipi nella regola at di @view-transition
utilizzando il descrittore types
o impostali all'istante negli eventi pageswap
e pagereveal
.
@view-transition {
navigation: auto;
types: slide, forwards;
}
Una volta impostati i tipi, puoi rispondere a questi tipi nel tuo CSS utilizzando i selettori di pseudo-classe :active-view-transition-type()
e :active-view-transition
che si applicano alla radice di transizione della vista.
/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
&::view-transition-old(content) {
animation-name: slide-out-to-left;
}
&::view-transition-new(content) {
animation-name: slide-in-from-right;
}
}
Per saperne di più sui tipi di transizione delle visualizzazioni, consulta la documentazione dedicata per le transizioni della visualizzazione dello stesso documento e per le transizioni delle visualizzazioni tra più documenti.
Feedback
Il feedback degli sviluppatori è sempre apprezzato. Per farlo, invia una segnalazione al CSS Working Group su GitHub con suggerimenti e domande. Aggiungi il prefisso [css-view-transitions]
al problema.
Se riscontri un bug, segnala un bug di Chromium.