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

Bramus

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

In Chrome 111, il team di Chrome ha distribuito transizioni di visualizzazione dello stesso documento per le applicazioni a pagina singola, una funzionalità ben accolta nella community di sviluppatori 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!

Tuttavia, l'implementazione iniziale richiedeva la creazione di un'applicazione SPA per utilizzare le transizioni di visualizzazione. A partire da Chrome 126, questo cambiamento non è più necessario, pertanto le transizioni della vista sono attivate per impostazione predefinita per le navigazioni della stessa origine. Ora puoi creare una transizione della vista tra due documenti diversi con la stessa origine.

Per attivare le transizioni tra le visualizzazioni dei documenti, è necessario che entrambe le parti attivino la funzionalità. 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 di base 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).

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 dello stesso documento per SPA sia a quelle di visualizzazione tra documenti per MPA.

Condividere stili di animazione con view-transition-class

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 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 sincronizzazione dell'animazione a più snapshot con un solo selettore.

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

Transizioni di visualizzazione selettive con tipi attivi

Un altro miglioramento apportato alle transizioni di visualizzazione è l'introduzione della possibilità di aggiungere tipi a una transizione di visualizzazione durante l'acquisizione e l'esecuzione. In questo modo è più facile lavorare con diverse transizioni di visualizzazione sulla stessa pagina, senza che le dichiarazioni dell'una 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 vada alla pagina più in alto o più in basso della sequenza.

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

Con i tipi di transizione della visualizzazione puoi ottenere lo stesso risultato, ma con il vantaggio aggiuntivo, la pulizia viene eseguita automaticamente al termine della transizione della visualizzazione. I tipi si applicano 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

Il feedback degli sviluppatori è sempre apprezzato. A questo scopo, invia una segnalazione al CSS Working Group su GitHub con suggerimenti e domande. Fai precedere il problema da [css-view-transitions].

Se riscontri un bug, segnala un bug di Chromium.