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

Bramus

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).

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

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.

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.