Transizioni per la visualizzazione dello stesso documento per le applicazioni a pagina singola

Jake Archibald

Bramus

Pubblicato: 17 agosto 2021, ultimo aggiornamento: 25 settembre 2024

Quando una transizione di visualizzazione viene eseguita in un singolo documento, si parla di transizione di visualizzazione all'interno dello stesso documento. Questo è in genere il caso delle applicazioni a pagina singola (SPA) in cui viene utilizzato JavaScript per aggiornare il DOM. Le transizioni tra le visualizzazioni dello stesso documento sono supportate in Chrome a partire dalla versione 111.

Per attivare una transizione di visualizzazione all'interno dello stesso documento, chiama document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Quando viene richiamato, il browser acquisisce automaticamente le istantanee di tutti gli elementi su cui è stata dichiarata una proprietà CSS view-transition-name.

Poi esegue il callback passato che aggiorna il DOM, dopodiché acquisisce gli snapshot del nuovo stato.

Questi snapshot vengono poi disposti in una struttura ad albero di pseudo-elementi e animati utilizzando le potenti animazioni CSS. Le coppie di istantanee dello stato precedente e nuovo passano gradualmente dalla posizione e dalle dimensioni precedenti alla nuova posizione, mentre i contenuti si dissolvenze incrociate. Se vuoi, puoi utilizzare CSS per personalizzare le animazioni.

La transizione predefinita: dissolvenza incrociata

La transizione di visualizzazione predefinita è una dissolvenza incrociata, quindi è un'ottima introduzione all'API:

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Dove updateTheDOMSomehow modifica il DOM nel nuovo stato. Puoi farlo come vuoi. Ad esempio, puoi aggiungere o rimuovere elementi, cambiare i nomi delle classi o cambiare gli stili.

E così le pagine si sovrappongono:

Ok, una dissolvenza incrociata non è così impressionante. Fortunatamente, le transizioni possono essere personalizzate, ma prima devi capire come funzionava questa dissolvenza incrociata di base.

Come funzionano queste transizioni

Aggiorniamo l'esempio di codice precedente.

document.startViewTransition(() => updateTheDOMSomehow(data));

Quando viene chiamato .startViewTransition(), l'API acquisisce lo stato attuale della pagina. Sono incluse le istantanee.

Al termine, viene chiamato il callback passato a .startViewTransition(). È qui che viene modificato il DOM. L'API acquisisce quindi il nuovo stato della pagina.

Una volta acquisito il nuovo stato, l'API crea una struttura ad albero di pseudo-elementi come questa:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

::view-transition è posizionato in un overlay, su tutto il resto della pagina. Questa opzione è utile se vuoi impostare un colore di sfondo per la transizione.

::view-transition-old(root) è uno screenshot della vecchia visualizzazione, mentre ::view-transition-new(root) è una rappresentazione in tempo reale della nuova visualizzazione. Entrambi vengono visualizzati come "contenuti sostituiti" CSS (ad esempio un <img>).

La vecchia vista si anima da opacity: 1 a opacity: 0, mentre la nuova vista si anima da opacity: 0 a opacity: 1, creando una dissolvenza incrociata.

Tutta l'animazione viene eseguita utilizzando animazioni CSS, quindi possono essere personalizzate con CSS.

Personalizza la transizione

Tutti gli pseudo-elementi di transizione della visualizzazione possono essere scelti come target con CSS e, poiché le animazioni sono definite utilizzando CSS, puoi modificarle utilizzando le proprietà di animazione CSS esistenti. Ad esempio:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

Con questa unica modifica, la dissolvenza ora è molto lenta:

Ok, non è ancora impressionante. Il seguente codice implementa invece la transizione dell'asse condiviso di Material Design:

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

Ecco il risultato:

Applicare transizioni a più elementi

Nella demo precedente, l'intera pagina è coinvolta nella transizione dell'asse condiviso. Funziona per la maggior parte della pagina, ma non sembra adatto all'intestazione, in quanto esce solo per rientrare di nuovo.

Per evitare che ciò accada, puoi estrarre l'intestazione dal resto della pagina in modo da animarla separatamente. Per farlo, devi assegnare view-transition-name all'elemento.

.main-header {
  view-transition-name: main-header;
}

Il valore di view-transition-name può essere qualsiasi (tranne none, che indica che non esiste un nome di transizione). Viene utilizzato per identificare in modo univoco l'elemento nella transizione.

Il risultato è:

Ora l'intestazione rimane in posizione e si attenua.

La dichiarazione CSS ha causato la modifica dell'albero degli pseudo-elementi:

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
   └─ ::view-transition-image-pair(main-header)
      ├─ ::view-transition-old(main-header)
      └─ ::view-transition-new(main-header)

Ora ci sono due gruppi di transizione. uno per l'intestazione e un altro per il resto. Questi elementi possono essere scelti come target in modo indipendente con CSS e possono avere transizioni diverse. Tuttavia, in questo caso main-header è stata lasciata con la transizione predefinita, che è una dissolvenza incrociata.

Ok, la transizione predefinita non è solo una dissolvenza incrociata, ::view-transition-group esegue anche le seguenti transizioni:

• Posizione e trasformazione (utilizzando un transform)
• Larghezza
• Altezza

Questo non ha avuto importanza fino a ora, poiché l'intestazione ha le stesse dimensioni e la stessa posizione su entrambi i lati della modifica del DOM. Ma puoi anche estrarre il testo nell'intestazione:

.main-header-text {
  view-transition-name: main-header-text;
  width: fit-content;
}

Viene utilizzato fit-content in modo che l'elemento abbia le dimensioni del testo, invece di estenderlo alla larghezza rimanente. In caso contrario, la freccia indietro riduce la dimensione dell'elemento di testo dell'intestazione, anziché la stessa dimensione in entrambe le pagine.

Ora abbiamo tre parti da utilizzare:

::view-transition
├─ ::view-transition-group(root)
│  └─ …
├─ ::view-transition-group(main-header)
│  └─ …
└─ ::view-transition-group(main-header-text)
   └─ …

Ripeto, usando solo i valori predefiniti:

Ora il testo dell'intestazione mostra una slide soddisfacente per fare spazio al pulsante Indietro.

Animare più pseudo-elementi nello stesso modo con view-transition-class

Supponiamo che tu abbia una transizione di visualizzazione con un gruppo di schede, ma anche un titolo sulla pagina. Per animare tutte le schede tranne il titolo, devi scrivere un selettore che abbia come target ogni singola scheda.

h1 {
    view-transition-name: title;
}
::view-transition-group(title) {
    animation-timing-function: ease-in-out;
}

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }

::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
    animation-timing-function: var(--bounce);
}

Hai 20 elementi? Sono 20 i selettori che devi scrivere. Vuoi aggiungere un nuovo elemento? Devi anche espandere il selettore che applica gli stili di animazione. Non esattamente scalabile.

view-transition-class può essere utilizzato negli pseudo-elementi di transizione della visualizzazione per applicare la stessa regola di stile.

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }

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

L'esempio di schede che segue utilizza il precedente snippet CSS. Tutte le carte, incluse quelle appena aggiunte, vengono applicate allo stesso tempo con un unico selettore: html::view-transition-group(.card).

Eseguire il debug delle transizioni

Poiché le transizioni di visualizzazione si basano sulle animazioni CSS, il riquadro Animazioni in Chrome DevTools è ottimo per il debug delle transizioni.

Utilizzando il riquadro Animazioni, puoi mettere in pausa l'animazione successiva, quindi eseguire lo scrubbing avanti e indietro per tutta l'animazione. Durante questa operazione, gli pseudo-elementi di transizione sono disponibili nel riquadro Elementi.

Gli elementi di transizione non devono necessariamente essere lo stesso elemento DOM

Finora abbiamo utilizzato view-transition-name per creare elementi di transizione separati per l'intestazione e il testo al suo interno. Si tratta concettualmente dello stesso elemento prima e dopo la modifica del DOM, ma puoi creare transizioni in caso contrario.

Ad esempio, all'embed del video principale può essere assegnato un view-transition-name:

.full-embed {
  view-transition-name: full-embed;
}

Poi, quando viene fatto clic sulla miniatura, è possibile assegnare lo stesso view-transition-name, solo per la durata della transizione:

thumbnail.onclick = async () => {
  thumbnail.style.viewTransitionName = 'full-embed';

  document.startViewTransition(() => {
    thumbnail.style.viewTransitionName = '';
    updateTheDOMSomehow();
  });
};

E il risultato:

La miniatura ora passa all'immagine principale. Anche se sono elementi concettualmente (e letteralmente) diversi, l'API di transizione li tratta come la stessa cosa perché condividono lo stesso view-transition-name.

Il codice reale per questa transizione è un po' più complicato rispetto all'esempio precedente, in quanto gestisce anche la transizione alla pagina in miniatura. Consulta la fonte per l'implementazione completa.

Transizioni di entrata e uscita personalizzate

Osserva questo esempio:

La barra laterale fa parte della transizione:

.sidebar {
  view-transition-name: sidebar;
}

Tuttavia, a differenza dell'intestazione nell'esempio precedente, la barra laterale non viene visualizzata su tutte le pagine. Se entrambi gli stati hanno la barra laterale, gli pseudo-elementi di transizione avranno il seguente aspetto:

::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
   └─ ::view-transition-image-pair(sidebar)
      ├─ ::view-transition-old(sidebar)
      └─ ::view-transition-new(sidebar)

Tuttavia, se la barra laterale si trova solo nella nuova pagina, lo pseudo-elemento ::view-transition-old(sidebar) non sarà presente. Poiché non esiste un'immagine "vecchia" per la barra laterale, la coppia di immagini avrà solo un ::view-transition-new(sidebar). Allo stesso modo, se la barra laterale si trova solo nella vecchia pagina, la coppia di immagini avrà solo un ::view-transition-old(sidebar).

Nella demo precedente, la barra laterale effettua transizioni diverse a seconda che sia in entrata, in uscita o presente in entrambi gli stati. Entra facendo scorrere il dito da destra e con dissolvenza in entrata, esce facendo scorrere a destra e dissolvendo in uscita, e rimane in posizione quando è presente in entrambi gli stati.

Per creare transizioni di entrata e uscita specifiche, puoi utilizzare la pseudo-classe :only-child per scegliere come target gli pseudo-elementi vecchi o nuovi quando è l'unico elemento secondario nella coppia di immagini:

/* Entry transition */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Exit transition */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

In questo caso, non esiste una transizione specifica per quando la barra laterale è presente in entrambi gli stati, poiché l'impostazione predefinita è perfetta.

Aggiornamenti DOM asincroni e attesa dei contenuti

Il callback passato a .startViewTransition() può restituire una promessa, il che consente aggiornamenti asincroni del DOM e in attesa che i contenuti importanti siano pronti.

document.startViewTransition(async () => {
  await something;
  await updateTheDOMSomehow();
  await somethingElse;
});

La transizione inizierà solo quando la promessa non verrà soddisfatta. Durante questo periodo, la pagina è bloccata, pertanto i ritardi devono essere ridotti al minimo. In particolare, i recuperi di rete devono essere eseguiti prima di chiamare .startViewTransition(), mentre la pagina è ancora completamente interattiva, anziché all'interno del callback di .startViewTransition().

Se decidi di attendere che le immagini o i caratteri siano pronti, assicurati di utilizzare un timeout aggressivo:

const wait = ms => new Promise(r => setTimeout(r, ms));

document.startViewTransition(async () => {
  updateTheDOMSomehow();

  // Pause for up to 100ms for fonts to be ready:
  await Promise.race([document.fonts.ready, wait(100)]);
});

Tuttavia, in alcuni casi è meglio evitare del tutto il ritardo e utilizzare i contenuti di cui già disponi.

Sfrutta al meglio i contenuti che hai già

Se la miniatura passa a un'immagine più grande:

La transizione predefinita è la dissolvenza incrociata, il che significa che la miniatura potrebbe avere una dissolvenza incrociata con un'immagine completa non ancora caricata.

Un modo per gestire questo problema è attendere il caricamento dell'immagine completa prima di avviare la transizione. Idealmente, questa operazione deve essere eseguita prima di chiamare .startViewTransition(), in modo che la pagina rimanga interattiva ed è possibile mostrare una rotellina per indicare all'utente che gli elementi sono in fase di caricamento. Ma in questo caso esiste un modo migliore:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
}

Ora la miniatura non scompare, ma rimane sotto l'immagine completa. Ciò significa che se la nuova visualizzazione non è stata caricata, la miniatura sarà visibile per tutta la durata della transizione. Ciò significa che la transizione può iniziare immediatamente e l'immagine completa può essere caricata in un secondo momento.

Questa soluzione non funzionerebbe se la nuova vista mostrasse trasparenza, ma in questo caso sappiamo che non lo è, quindi possiamo apportare questa ottimizzazione.

Gestire le modifiche alle proporzioni

Comodamente, finora tutte le transizioni sono state effettuate verso elementi con le stesse proporzioni, ma non sempre. Cosa succede se la miniatura è 1:1 e l'immagine principale è in 16:9?

Nella transizione predefinita, il gruppo si anima dalla dimensione precedente a quella successiva. Le visualizzazioni precedenti e nuove mostrano la larghezza del gruppo al 100% e l'altezza automatica, il che significa che mantengono le proporzioni indipendentemente dalle dimensioni del gruppo.

Si tratta di un valore predefinito valido, ma non è quello che ti serve in questo caso. Pertanto:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(full-embed) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(full-embed) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

Ciò significa che la miniatura rimane al centro dell'elemento man mano che la larghezza aumenta, ma l'immagine completa viene "ricroppata" durante la transizione da 1:1 a 16:9.

Per informazioni più dettagliate, consulta l'articolo Visualizzare le transizioni: gestire le modifiche alle proporzioni

Utilizzare le query supporti per cambiare le transizioni per i diversi stati dei dispositivi

Potresti voler utilizzare transizioni diverse sui dispositivi mobili e sui computer, come in questo esempio che esegue una slide intera lateralmente sui dispositivi mobili, ma una slide più discreta su computer.

Questo risultato può essere ottenuto utilizzando query sui media regolari:

/* Transitions for mobile */
::view-transition-old(root) {
  animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(root) {
  animation: 300ms ease-out both full-slide-from-right;
}

@media (min-width: 500px) {
  /* Overrides for larger displays.
  This is the shared axis transition from earlier in the article. */
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

Potresti anche voler cambiare gli elementi che assegni a view-transition-name, a seconda delle query supporti corrispondenti.

Rispondere alla preferenza "movimento ridotto"

Gli utenti possono indicare di preferire la riduzione del movimento tramite il proprio sistema operativo e questa preferenza viene esposta in CSS.

Puoi scegliere di impedire qualsiasi transizione per questi utenti:

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Tuttavia, una preferenza per "movimento ridotto" non significa che l'utente non voglia nessun movimento. Invece dello snippet precedente, puoi scegliere un'animazione più sottile, ma che esprima comunque la relazione tra gli elementi e il flusso di dati.

Gestire più stili di transizione della visualizzazione con i tipi di transizione della visualizzazione

A volte, una transizione da una visualizzazione specifica a un'altra deve essere personalizzata in modo specifico. Ad esempio, quando passi alla pagina successiva o precedente in una sequenza di paginazione, potresti voler far scorrere i contenuti in una direzione diversa a seconda che tu stia passando a una pagina più alta o più bassa della sequenza.

A questo scopo, puoi utilizzare i tipi di transizione Visualizza, che consentono di assegnare uno o più tipi a una transizione Visualizzazione attiva. Ad esempio, quando passi a una pagina superiore in una sequenza di impaginazione, utilizza il tipo forwards e quando passi a una pagina inferiore, utilizza il tipo backwards. Questi tipi sono attivi solo durante l'acquisizione o l'esecuzione di una transizione e ogni tipo può essere personalizzato tramite CSS per utilizzare animazioni diverse.

Per utilizzare i tipi in una transizione di visualizzazione dello stesso documento, devi passare types al metodo startViewTransition. Per consentire questa operazione, document.startViewTransition accetta anche un oggetto: update è la funzione di callback che aggiorna il DOM, mentre types è un array con questi tipi.

const direction = determineBackwardsOrForwards();

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

Per rispondere a questi tipi, usa il selettore :active-view-transition-type(). Passa il type che vuoi scegliere come target nel selettore. In questo modo puoi mantenere separati gli stili di più transizioni di visualizzazione, senza che le dichiarazioni di una interferiscano con quelle dell'altra.

Poiché i tipi vengono applicati solo durante l'acquisizione o l'esecuzione della transizione, puoi utilizzare il selettore per impostare o annullare l'impostazione di un view-transition-name su un elemento solo per la transizione di visualizzazione con quel tipo.

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* 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;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

Nella seguente demo di impaginazione, i contenuti della pagina scorrono in avanti o indietro in base al numero di pagina a cui stai passando. I tipi sono determinati al clic con cui vengono trasmessi a document.startViewTransition.

Per scegliere come target qualsiasi transizione di Visualizzazione attiva, indipendentemente dal tipo, puoi utilizzare invece il selettore di pseudo-classe :active-view-transition.

html:active-view-transition {
    …
}

Gestisci più stili di transizione della visualizzazione con un nome di classe nella radice delle transizioni di visualizzazione

A volte, una transizione da un determinato tipo di visualizzazione a un altro deve avere una transizione personalizzata in modo specifico. In alternativa, la navigazione "indietro" deve essere diversa da quella "avanti".

Prima dei tipi di transizione, per gestire questi casi era necessario impostare temporaneamente un nome di classe nella radice di transizione. Quando chiami document.startViewTransition, questa radice di transizione è l'elemento <html>, accessibile utilizzando document.documentElement in JavaScript:

if (isBackNavigation) {
  document.documentElement.classList.add('back-transition');
}

const transition = document.startViewTransition(() =>
  updateTheDOMSomehow(data)
);

try {
  await transition.finished;
} finally {
  document.documentElement.classList.remove('back-transition');
}

Per rimuovere le classi al termine della transizione, questo esempio utilizza transition.finished, una promessa che si risolve quando la transizione ha raggiunto il suo stato finale. Le altre proprietà di questo oggetto sono trattate nel riferimento dell'API.

Ora puoi utilizzare quel nome di classe nel tuo CSS per modificare la transizione:

/* 'Forward' transitions */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
      cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
  animation-name: fade-out, slide-to-right;
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, slide-from-left;
}

Come per le media query, la presenza di queste classi può essere utilizzata anche per modificare gli elementi che ricevono un view-transition-name.

Eseguire transizioni senza bloccare altre animazioni

Guarda questa demo di una transizione di posizione del video:

Hai notato qualcosa di sbagliato? In caso contrario, non preoccuparti. Eccolo rallentato:

Durante la transizione, il video sembra bloccarsi, poi la versione riprodotta viene visualizzata gradualmente. Questo perché ::view-transition-old(video) è uno screenshot della vecchia visualizzazione, mentre ::view-transition-new(video) è un'immagine in tempo reale della nuova visualizzazione.

Puoi risolvere il problema, ma prima chiediti se vale la pena farlo. Se non hai visualizzato il "problema" mentre la transizione veniva riprodotta alla sua normale velocità, non mi preoccupavo di modificarla.

Se vuoi davvero correggerlo, non mostrare ::view-transition-old(video); passa direttamente a ::view-transition-new(video). Puoi farlo sostituendo gli stili e le animazioni predefiniti:

::view-transition-old(video) {
  /* Don't show the frozen old view */
  display: none;
}

::view-transition-new(video) {
  /* Don't fade the new view in */
  animation: none;
}

È tutto.

Ora il video viene riprodotto durante tutta la transizione.

Integrazione con l'API Navigation (e altri framework)

Le transizioni di visualizzazione vengono specificate in modo da poter essere integrate con altri framework o librerie. Ad esempio, se l'applicazione a pagina singola (APS) utilizza un router, puoi regolare il meccanismo di aggiornamento del router per aggiornare i contenuti utilizzando una transizione di visualizzazione.

Nel seguente snippet di codice tratto da questa demo di impaginazione, il gestore dell'intercettazione dell'API Navigation viene modificato in modo da chiamare document.startViewTransition quando sono supportate le transizioni di visualizzazione.

navigation.addEventListener("navigate", (e) => {
    // Don't intercept if not needed
    if (shouldNotIntercept(e)) return;

    // Intercept the navigation
    e.intercept({
        handler: async () => {
            // Fetch the new content
            const newContent = await fetchNewContent(e.destination.url, {
                signal: e.signal,
            });

            // The UA does not support View Transitions, or the UA
            // already provided a Visual Transition by itself (e.g. swipe back).
            // In either case, update the DOM directly
            if (!document.startViewTransition || e.hasUAVisualTransition) {
                setContent(newContent);
                return;
            }

            // Update the content using a View Transition
            const t = document.startViewTransition(() => {
                setContent(newContent);
            });
        }
    });
});

Alcuni browser, ma non tutti, forniscono la propria transizione quando l'utente esegue un gesto di scorrimento per navigare. In questo caso, non dovresti attivare la transizione di visualizzazione, in quanto ciò potrebbe comportare un'esperienza utente scadente o confusa. L'utente vedrà due transizioni, una fornita dal browser e l'altra da te, eseguite in successione.

Pertanto, consigliamo di evitare che inizi una transizione della visualizzazione quando il browser ha fornito la propria transizione visiva. Per ottenere questo risultato, controlla il valore della proprietà hasUAVisualTransition dell'istanza NavigateEvent. La proprietà viene impostata su true quando il browser ha fornito una transizione visiva. Questa proprietà hasUIVisualTransition esiste anche in PopStateEvent istanze.

Nello snippet precedente, il controllo che determina se eseguire la transizione di visualizzazione prende in considerazione questa proprietà. Se le transizioni di visualizzazione nello stesso documento non sono supportate o se il browser ha già fornito la propria transizione, la transizione della visualizzazione viene saltata.

if (!document.startViewTransition || e.hasUAVisualTransition) {
  setContent(newContent);
  return;
}

Nella registrazione seguente, l'utente scorre per tornare alla pagina precedente. L'acquisizione a sinistra non include un segno di spunta per il flag hasUAVisualTransition. La registrazione a destra include il controllo, quindi salta la transizione di visualizzazione manuale perché il browser ha fornito una transizione visiva.

Animazione con JavaScript

Finora tutte le transizioni sono state definite utilizzando CSS, ma a volte CSS non è sufficiente:

Due parti di questa transizione non possono essere ottenute solo con il CSS:

• L'animazione inizia dal punto del clic.
• L'animazione termina con il cerchio che ha un raggio fino all'angolo più lontano. Tuttavia, spero che sarà possibile farlo con CSS in futuro.

Fortunatamente, puoi creare transizioni utilizzando l'API Web Animation.

let lastClick;
addEventListener('click', event => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // With a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        // Specify which pseudo-element to animate
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

In questo esempio viene usata transition.ready, una promessa che si risolve una volta creati correttamente gli pseudo-elementi di transizione. Le altre proprietà di questo oggetto sono descritte nel riferimento API.

Transizioni come miglioramento

L'API View Transizione è progettata per "aggregare" una modifica al DOM e creare una transizione apposita. Tuttavia, la transizione deve essere considerata come un miglioramento, perché nella tua app non deve essere inserito un "errore" se la modifica del DOM ha esito positivo, ma la transizione non va a buon fine. Idealmente, la transizione non dovrebbe fallire, ma se ciò accade, non deve interrompere il resto dell'esperienza utente.

Per trattare le transizioni come un miglioramento, fai attenzione a non utilizzare le promesse di transizione in modo che l'app non generi un errore se la transizione non va a buon fine.

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  await transition.ready;

  document.documentElement.animate(
    {
      clipPath: [`inset(50%)`, `inset(0)`],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
}

Il problema di questo esempio è che switchView() viene rifiutato se la transizione non riesce a raggiungere uno stato ready, ma ciò non significa che il passaggio alla visualizzazione non sia riuscito. Il DOM potrebbe essere stato aggiornato correttamente, ma erano presenti view-transition-name duplicati, quindi la transizione è stata saltata.

Invece:

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  animateFromMiddle(transition);

  await transition.updateCallbackDone;
}

async function animateFromMiddle(transition) {
  try {
    await transition.ready;

    document.documentElement.animate(
      {
        clipPath: [`inset(50%)`, `inset(0)`],
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: '::view-transition-new(root)',
      }
    );
  } catch (err) {
    // You might want to log this error, but it shouldn't break the app
  }
}

In questo esempio viene utilizzato transition.updateCallbackDone per attendere l'aggiornamento del DOM e rifiutarlo se l'operazione non riesce. switchView non rifiuta più se la transizione non va a buon fine, si risolve al termine dell'aggiornamento del DOM e rifiuta se non va a buon fine.

Se vuoi che switchView venga risolto quando la nuova vista è "stabilita", ad esempio se qualsiasi transizione animata è stata completata o è saltata alla fine, sostituisci transition.updateCallbackDone con transition.finished.

Non è un polyfill, ma…

Non si tratta di una funzionalità semplice per il polyfill. Tuttavia, questa funzione di supporto semplifica molto le cose nei browser che non supportano le transizioni di visualizzazione:

function transitionHelper({
  skipTransition = false,
  types = [],
  update,
}) {

  const unsupported = (error) => {
    const updateCallbackDone = Promise.resolve(update()).then(() => {});

    return {
      ready: Promise.reject(Error(error)),
      updateCallbackDone,
      finished: updateCallbackDone,
      skipTransition: () => {},
      types,
    };
  }

  if (skipTransition || !document.startViewTransition) {
    return unsupported('View Transitions are not supported in this browser');
  }

  try {
    const transition = document.startViewTransition({
      update,
      types,
    });

    return transition;
  } catch (e) {
    return unsupported('View Transitions with types are not supported in this browser');
  }
}

E può essere utilizzato in questo modo:

function spaNavigate(data) {
  const types = isBackNavigation ? ['back-transition'] : [];

  const transition = transitionHelper({
    update() {
      updateTheDOMSomehow(data);
    },
    types,
  });

  // …
}

Nei browser che non supportano le transizioni di visualizzazione, updateDOM verrà comunque chiamato, ma non verrà visualizzata una transizione animata.

Puoi anche fornire alcuni classNames da aggiungere a <html> durante la transizione, in modo da modificare più facilmente la transizione a seconda del tipo di navigazione.

Puoi anche passare true a skipTransition se non vuoi un'animazione, anche nei browser che supportano le transizioni di visualizzazione. Questa opzione è utile se il tuo sito ha una preferenza utente per disattivare le transizioni.

Utilizzo dei framework

Se stai lavorando con una libreria o un framework che astrae le modifiche del DOM, la parte difficile è sapere quando la modifica del DOM è completa. Ecco un insieme di esempi che utilizzano l'helper riportato sopra in vari framework.

• Reazione: la chiave in questo caso è flushSync, che applica un insieme di modifiche di stato in modo sincrono. Sì, c'è un avviso importante sull'utilizzo di questa API, ma Dan Abramov mi assicura che è appropriata in questo caso. Come al solito con React e codice asincrono, quando utilizzi le varie promesse restituite da startViewTransition, assicurati che il codice sia in esecuzione con lo stato corretto.
• Vue.js: la chiave qui è nextTick, che viene completata una volta aggiornato il DOM.
• Svelte: molto simile a Vue, ma il metodo per attendere il cambiamento successivo è tick.
• Lit: la chiave qui è la promessa this.updateComplete all'interno dei componenti, che viene soddisfatta dopo l'aggiornamento del DOM.
• Angular: la chiave qui è applicationRef.tick, che esegue il flush delle modifiche al DOM in attesa. A partire dalla versione 17 di Angular, puoi utilizzare withViewTransitions fornito con @angular/router.

Riferimento API

const viewTransition = document.startViewTransition(update)

Avvia un nuovo ViewTransition.

update è una funzione che viene chiamata dopo aver acquisito lo stato corrente del documento.

Quando la promessa restituita da updateCallback viene soddisfatta, la transizione inizia nel frame successivo. Se la promessa restituita da updateCallback viene rifiutata, la transizione viene abbandonata.

const viewTransition = document.startViewTransition({ update, types })

Avvia un nuovo ViewTransition con i tipi specificati

update viene chiamato dopo aver acquisito lo stato corrente del documento.

types imposta i tipi attivi per la transizione quando la acquisisci o la esegui. All'inizio è vuoto. Per ulteriori informazioni, consulta viewTransition.types di seguito.

Membri istanza di ViewTransition:

viewTransition.updateCallbackDone

Una promessa che viene soddisfatta quando la promessa restituita da updateCallback viene soddisfatta o rifiutata quando viene rifiutata.

L'API View Transizione aggrega una modifica del DOM e crea una transizione. Tuttavia, a volte non ti interessa l'esito positivo o negativo dell'animazione di transizione, ma vuoi solo sapere se e quando si verifica la modifica del DOM. updateCallbackDone è per questo caso d'uso.

viewTransition.ready

Una promessa che si completa una volta creati gli pseudo-elementi per la transizione e quando l'animazione sta per iniziare.

Viene rifiutato se la transizione non può iniziare. Ciò può essere dovuto a una configurazione errata, ad esempio view-transition-name duplicati, o se updateCallback restituisce una promessa rifiutata.

Questo è utile per animare gli pseudo-elementi di transizione con JavaScript.

viewTransition.finished

Una promessa che viene soddisfatta una volta che lo stato finale è completamente visibile e interattivo per l'utente.

L'azione viene rifiutata solo se updateCallback restituisce una promessa rifiutata, poiché questo indica che lo stato finale non è stato creato.

In caso contrario, se l'inizio di una transizione non va a buon fine o viene saltata durante la transizione, lo stato finale viene comunque raggiunto, quindi finished soddisfa.

viewTransition.types

Un oggetto di tipo Set che contiene i tipi di transizioni di Visualizzazione attiva. Per manipolare le voci, utilizza i metodi di istanza clear(), add() e delete().

Per rispondere a un tipo specifico in CSS, usa il selettore di pseudo-classe :active-view-transition-type(type) nella radice della transizione.

I tipi vengono ripuliti automaticamente al termine della transizione di visualizzazione.

viewTransition.skipTransition()

Salta la parte dell'animazione della transizione.

Non perderai la chiamata a updateCallback, poiché la modifica del DOM è separata dalla transizione.

Riferimento allo stile e alla transizione predefiniti

::view-transition

L'elemento pseudo-radice che riempie l'area visibile e contiene ogni ::view-transition-group.

::view-transition-group

Posizionato in modo assoluto.

Le transizioni width e height tra gli stati "prima" e "dopo".

Transizioni transform tra il quadrangolo dello spazio viewport "prima" e "dopo".

::view-transition-image-pair

Assolutamente posizionato per riempire il gruppo.

isolation: isolate per limitare l'effetto di mix-blend-mode sulla vecchia e sulla nuova vista.

::view-transition-new e ::view-transition-old

Posizionato in modo assoluto in alto a sinistra del wrapper.

Riempie il 100% della larghezza del gruppo, ma ha un'altezza automatica, quindi manterrà le proporzioni anziché riempire il gruppo.

Ha mix-blend-mode: plus-lighter per consentire una dissolvenza incrociata reale.

La vista precedente è passata da opacity: 1 a opacity: 0. La nuova visualizzazione viene trasferita da opacity: 0 a opacity: 1.

Feedback

I feedback degli sviluppatori sono sempre apprezzati. 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.