Quali sono le novità nelle transizioni delle visualizzazioni? (Aggiornamento Google I/O 2024)

Data di pubblicazione: 16 maggio 2024

In occasione della conferenza Google I/O 2024, ho annunciato il passaggio successivo per le transizioni di visualizzazione: le transizioni di visualizzazione tra documenti per le applicazioni multipagina (MPA).

Inoltre, ho condiviso alcuni miglioramenti che ti consentono di lavorare più facilmente con le transizioni di visualizzazione in generale.

  • Condivisione degli stili di animazione tra gli pseudo-elementi di transizione della visualizzazione con view-transition-class.
  • Transizioni di visualizzazione selettive con tipi attivi.

Questi miglioramenti si applicano sia alle transizioni di visualizzazione all'interno dello stesso documento per le applicazioni a pagina singola (SPA) sia alle transizioni di visualizzazione tra documenti per le MPA.

Transizioni tra visualizzazioni di documenti per i MPA

Supporto dei browser

  • Chrome: 126.
  • Edge: 126.
  • Firefox: non supportato.
  • Safari Technology Preview: supportato.

In Chrome 111, il team di Chrome ha rilasciato le transizioni tra visualizzazioni dello stesso documento per le applicazioni a pagina singola, una funzionalità ben accolta all'interno della community di creazione di siti web.

È fantastico vedere cosa avete creato molti di voi con le transizioni di visualizzazione. Dalle implementazioni tipiche che "trasformano la miniatura nella foto grande" a esperienze immersive altamente personalizzate come questa di Airbnb. Formidabile!

Una transizione di visualizzazione all'interno dello stesso documento, come quella visibile su Airbnb.

Tuttavia, l'implementazione iniziale richiedeva la creazione di un'applicazione SPA per utilizzare le transizioni di visualizzazione. A partire da Chrome 126, questo non è più il caso, poiché le transizioni di visualizzazione sono ora abilitate per impostazione predefinita per le navigazioni nello stesso dominio. Ora puoi creare una transizione di visualizzazione tra due documenti diversi della stessa origine.

Per attivare le transizioni tra le visualizzazioni dei documenti, è necessario che entrambe le parti la attivino. Per farlo, utilizza la regola at @view-transition e imposta il descrittore navigation su auto.

@view-transition {
  navigation: auto;
}

Le transizioni tra visualizzazioni di documenti diversi utilizzano gli stessi elementi costitutivi e principi delle transizioni tra visualizzazioni dello stesso documento. Gli elementi a cui è stato applicato view-transition-name vengono acquisiti e puoi personalizzare le animazioni utilizzando le animazioni CSS.

Per personalizzare le transizioni di visualizzazione tra documenti, utilizza gli eventi pageswap e pagereveal, che ti consentono di accedere all'oggetto di transizione di visualizzazione.

  • Con pageswap puoi apportare alcune modifiche dell'ultimo minuto alla pagina in uscita appena prima che vengano acquisiti gli snapshot precedenti.
  • Con pagereveal puoi personalizzare la nuova pagina prima che inizi a essere visualizzata dopo l'inizializzazione.

In entrambi gli eventi hai accesso a un oggetto NavigationActivation per personalizzare una transizione di visualizzazione tra documenti in base alle voci della cronologia delle destinazioni precedenti e nuove o al tipo di navigazione.

Per finire, puoi aspettare il caricamento dei contenuti con il blocco del rendering 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à (oltre ad alcuni miglioramenti).

Registrazione della demo di Stack Navigator. Utilizza transizioni tra visualizzazioni di documenti personalizzate nell'evento pagereveal in base alle informazioni di attivazione della navigazione. Viene utilizzato anche il prerendering.

Si tratta di un MPA con navigazioni tra documenti, ospitato sulla stessa origine. Se utilizzi pagereveal, il tipo di animazione viene determinato in base alle voci della cronologia delle destinazioni precedenti e nuove.

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 ulteriori informazioni su come attivare e personalizzare le transizioni tra le visualizzazioni dei documenti, consulta la documentazione sulle transizioni tra le visualizzazioni dei documenti.


Miglioramenti alle transizioni di visualizzazione

Oltre a supportare le transizioni tra viste di più documenti per le MPA, Chrome include anche alcuni perfezionamenti per lavorare con le transizioni di visualizzazione in generale.

Questi miglioramenti si applicano sia alle transizioni di visualizzazione nello stesso documento per le SPA sia alle transizioni di visualizzazione tra documenti per le MPA.

Condividere stili di animazione con view-transition-class

Supporto dei browser

  • Chrome: 125.
  • Bordo: 125.
  • Firefox: non supportato.
  • Safari: 18.2.

Fino a questo momento, per animare più istantanee nello stesso modo, era necessario scegliere come target ogni istantanea singolarmente ripetendo il relativo pseudo-selettore per ogni elemento con 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 istantanei corrispondenti. Il risultato sono selettori molto più semplici, che si adattano 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 lo stesso tempo di animazione a molti istantanei utilizzando un selettore.

Registrazione della demo di Schede. Se utilizzi view-transition-class, viene applicato lo stesso animation-timing-function a tutte le schede, tranne a quelle aggiunte o rimosse.

Per scoprire di più su view-transition-class, leggi la documentazione dedicata a view-transition-class.

Transizioni di visualizzazione selettive con tipi attivi

Supporto dei browser

  • Chrome: 125.
  • Bordo: 125.
  • Firefox: non supportato.
  • Safari: 18.

Un altro perfezionamento delle transizioni di visualizzazione è 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 nella stessa pagina, senza che le dichiarazioni di una influenzino l'altra.

Ad esempio, quando passi alla pagina successiva o a quella precedente in una sequenza di impaginazione, ti consigliamo di utilizzare animazioni diverse a seconda che tu stia passando a una pagina precedente o successiva della sequenza.

Registrazione della demo di paginazione. I tipi determinano quale animazione utilizzare. Gli stili sono separati nel foglio di stile grazie ai tipi di transizione attivi.

Prima dei tipi attivi, potevi aggiungere classi al DOM e rispondere a queste classi nel CSS. Tuttavia, dovrai anche eseguire la pulizia al termine delle transizioni.

Con i tipi di transizione di visualizzazione puoi ottenere lo stesso risultato, con il vantaggio aggiuntivo che questi tipi vengono ripuliti automaticamente al termine della transizione di visualizzazione. I tipi vengono applicati solo durante l'acquisizione o l'esecuzione della transizione.

Per le transizioni tra visualizzazioni dello stesso documento, trasmetti types al metodo startViewTransition, che ora accetta un oggetto. update è la funzione di callback che aggiorna il DOM e types è una sequenza di stringhe.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

Per una transizione di visualizzazione tra documenti, imposta i tipi nella regola at @view-transition utilizzando il descrittore types o impostali dinamicamente negli eventi pageswap e pagereveal.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Una volta impostati i tipi, puoi rispondere a questi tipi nel CSS utilizzando i selettori di pseudo-classi :active-view-transition-type() e :active-view-transition che si applicano alla radice della 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 scoprire di più sui tipi di transizione di visualizzazione, consulta la documentazione dedicata alle transizioni di visualizzazione all'interno dello stesso documento e alle transizioni di visualizzazione tra documenti.


Feedback

I feedback degli sviluppatori sono sempre apprezzati. A tale scopo, segnala un problema al gruppo di lavoro CSS su GitHub con suggerimenti e domande. Prefissa il problema con [css-view-transitions].

Se riscontri un bug, segnala un bug di Chromium.