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

Bramus

Data di pubblicazione: 16 maggio 2024

A 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 nello stesso documento per le applicazioni a pagina singola (SPA) sia alle transizioni di visualizzazione tra documenti per le MPA.

Transizioni di visualizzazione tra documenti per gli MPA

In Chrome 111, il team di Chrome ha rilasciato le transizioni di visualizzazione nello stesso documento per le applicazioni a pagina singola, una funzionalità ben accolta dalla community di sviluppo web.

È fantastico vedere cosa avete creato con le transizioni di visualizzazione. Dalle implementazioni tipiche che "fanno crescere la miniatura fino a diventare la foto grande" alle esperienze immersive altamente personalizzate come questa di Airbnb. Formidabile!

Tuttavia, l'implementazione iniziale richiedeva la creazione di una SPA per utilizzare le transizioni di visualizzazione. A partire da Chrome 126, questo non è più il caso: le transizioni di visualizzazione sono ora attivate per impostazione predefinita per le navigazioni con la stessa origine. Ora puoi creare una transizione di visualizzazione tra due documenti di stessa origine.

Per abilitare le transizioni di visualizzazione tra documenti, entrambe le estremità devono essere attivate. Per farlo, utilizza la regola at @view-transition e imposta il descrittore navigation su auto.

@view-transition {
  navigation: auto;
}

Le transizioni di visualizzazione tra documenti utilizzano gli stessi blocchi e principi delle transizioni di visualizzazione nello stesso documento. Gli elementi a cui è applicato un 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 danno accesso all'oggetto di transizione di visualizzazione.

• Con pageswap puoi apportare alcune modifiche dell'ultimo minuto alla pagina in uscita subito prima che vengano acquisite le vecchie istantanee.
• 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 di visualizzazione tra documenti in base alle voci della cronologia delle destinazioni precedenti e nuove o al tipo di navigazione.

Inoltre, puoi attendere il caricamento dei contenuti con il rendering bloccante 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).

Si tratta di un'app multipagina con navigazioni tra documenti, ospitata 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 saperne di più su come attivare e personalizzare le transizioni di visualizzazione tra documenti, consulta la documentazione sulle transizioni di visualizzazione tra documenti.

Visualizzare i miglioramenti delle transizioni

Oltre alle transizioni di visualizzazione tra documenti per le app multipagina, Chrome include anche alcuni perfezionamenti per l'utilizzo delle 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 gli stili di animazione con view-transition-class

Finora, quando animavi più snapshot nello stesso modo, dovevi scegliere come target ogni singolo snapshot 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 nei pseudo selettori per scegliere come target tutti gli snapshot corrispondenti. In questo modo, i selettori sono molto più semplici e vengono scalati automaticamente da uno a più elementi.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

L'esempio di schede seguente utilizza view-transition-class per applicare la stessa tempistica di animazione a molti snapshot utilizzando un 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 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 sulla stessa pagina, senza le dichiarazioni di quella che cambia l'altra.

Ad esempio, quando vai 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 inferiore della sequenza.

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

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

Per le transizioni di visualizzazione nello stesso documento, passa 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 @@view-transition utilizzando il descrittore types o impostali al volo 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 gli pseudoselettori :active-view-transition-type() e :active-view-transition, che si applicano alla radice della transizione di visualizzazione.

/* 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 nello stesso documento e alle transizioni di visualizzazione tra documenti.

Feedback

I feedback degli sviluppatori sono sempre apprezzati. A questo scopo, segnala un problema al CSS Working Group su GitHub con suggerimenti e domande. Aggiungi il prefisso [css-view-transitions] al tuo problema.

Se riscontri un bug, segnala un bug di Chromium.