L'API View Transition ti consente di aggiornare il DOM in un unico passaggio, generando al contempo una transizione animata tra i due stati.
Questo tipo di transizioni era una funzionalità richiesta di frequente dagli sviluppatori, incluso me, e penso che siamo riusciti a implementarla in modo da bilanciare le impostazioni predefinite ottimali con l'estensibilità e la personalizzazione. Sembra che ci stiamo dando una pacca sulla spalla, ma i feedback degli sviluppatori sono stati fondamentali per la progettazione di questa funzionalità. Un prototipo precedente di questa funzionalità era molto meno flessibile e le persone (come te?) che si sono prese il tempo di testare i prototipi e fornire feedback hanno innescato un ripensamento totale. Grazie.
Per acquisire familiarità con la funzionalità e provare alcune demo, consulta la nostra guida. Se ritieni che manchi qualcosa, contattaci su Twitter, Mastodon o via email.
L'API View Transition è attualmente disponibile solo in Chrome, ma può essere utilizzata come miglioramento progressivo. La guida include una funzione di supporto che puoi utilizzare su tutti i browser, ma solo i browser che supportano le transizioni di visualizzazione mostreranno l'animazione.
Abbiamo sviluppato questa funzionalità all'interno del CSS Working Group, con il contributo di altri fornitori di browser e di sviluppatori indipendenti. Non sappiamo se o quando altri browser adotteranno le transizioni di visualizzazione, ma tieni d'occhio la posizione di Mozilla sugli standard e la posizione di WebKit sugli standard.
Ma non abbiamo ancora finito.
La funzionalità introdotta in Chrome 111 è solo la prima release. Ci auguriamo di aver già trovato tutti i bug, ma segnala eventuali problemi riscontrati all'indirizzo crbug.com, preferibilmente con una demo ridotta. Se non hai dimestichezza con questo tipo di servizio, contattaci su Twitter, Mastodon o via email e saremo felici di aiutarti.
Questa release è una parte piccola, ma speriamo utile, di un quadro più ampio. Abbiamo già delineato alcune estensioni di questa funzionalità per garantire che i componenti che stiamo spedendo oggi siano compatibili con le versioni future.
Ecco un'anteprima di cosa abbiamo in mente. Non sono in ordine di priorità (forse la prima è la più importante per molte persone), quindi ci farebbe piacere ricevere un feedback su quali aggiunte sono le più importanti per te.
Transizioni tra documenti
Penso che sia la funzionalità che la maggior parte degli sviluppatori vorrebbe che implementassimo per prima. La buona notizia è che ci stiamo già lavorando.
L'API View Transitions è stata progettata per funzionare in documenti dello stesso dominio. L'unica differenza è che, anziché startViewTransition che segnala la modifica dello stato DOM, la navigazione stessa segnalerà la modifica.
Il nostro prototipo è dietro il flag chrome://flags/#view-transition-on-navigation. Ecco una demo semplicissima e una demo più complessa.
Per procedere, dobbiamo capire in che modo ogni pagina attiva la transizione. Al momento utilizziamo un meta tag: <meta name="view-transition" content="same-origin">, ma riteniamo che il CSS sia una soluzione migliore. Vogliamo anche semplificare la comprensione del tipo di pagina da cui stai eseguendo la transizione, preferibilmente senza dover scrivere JavaScript.
C'è molto lavoro da fare e preferiamo farlo bene piuttosto che in fretta, ma è sicuramente una priorità per noi.
Animazioni basate su compositor
Abbiamo scelto di animare la larghezza e l'altezza dei gruppi di transizione per impostazione predefinita perché è molto più facile da personalizzare. Tuttavia, ciò significa che l'animazione viene eseguita nel thread principale, il che non è l'ideale, in particolare durante i caricamenti delle pagine.
Abbiamo in programma di rilevare le animazioni predefinite e le personalizzazioni comuni, per poi reinterpretarle come animazioni basate sul compositore per un notevole miglioramento del rendimento.
Transizioni con ambito
Al momento, le transizioni SPA hanno come ambito l'intero documento e può essere eseguita una sola transizione alla volta. Vogliamo introdurre una funzionalità che consenta di limitare l'ambito delle transizioni a un determinato elemento in modo che più componenti della pagina possano eseguire le transizioni in modo indipendente.
In questo modo, ad esempio, un video player incorporato potrebbe utilizzare le transizioni di visualizzazione contemporaneamente a un widget di chat incorporato.
Gruppi di transizione nidificati
Al momento, tutti i ::view-transition-group sono fratelli. Spesso si tratta di una buona cosa, in quanto consente alle visualizzazioni di passare da un contenitore all'altro e non devi preoccuparti di eventuali ritagli.
Tuttavia, a volte vuoi che una visualizzazione venga ritagliata da un elemento principale, che potrebbe essere coinvolto anche nella transizione.
Vogliamo esaminare un'attivazione che inserisce un determinato ::view-transition-group all'interno di un altro ::view-transition-group.
Classi di transizioni
Ogni view-transition-name deve essere univoco. In questo modo identifichiamo un determinato elemento come "lo stesso" a livello concettuale su entrambi i lati della modifica del DOM, anche se non si tratta letteralmente dello stesso elemento.
Tuttavia, a volte elementi con view-transition-name diversi devono utilizzare lo stesso tipo di animazione. Al momento, ciò significa aggiungere una regola del selettore per ogni view-transition-name.
Per superare questa limitazione, vorremmo aggiungere un modo per creare classi di transizioni.
Ignora gli elementi fuori schermo
Se assegni a un elemento un view-transition-name, questo verrà coinvolto nella transizione come gruppo autonomo. A volte, però, non è l'ideale. Ad esempio, se assegni a un'intestazione un view-transition-name e passi da uno stato in cui hai scremato verso il basso di 2000 pixel a uno stato nella parte superiore della pagina, l'animazione dell'intestazione inizierà a 2000 pixel di distanza, il che non è corretto in termini di tempistica.
Vorremmo invece aggiungere un'opzione di attivazione in cui un elemento verrà ignorato, come se non avesse un view-transition-name, se è completamente esterno all'area visibile.
Puoi già farlo con JavaScript impostando dinamicamente style.viewTransitionName, ma sembra che dovremmo avere una soluzione dichiarativa per questo.
Animazioni basate su requestAnimationFrame
Puoi già creare animazioni di transizione delle visualizzazioni con JavaScript tramite l'API di animazione web, ma a volte devi gestire le cose frame per frame con requestAnimationFrame.
Puoi già farlo, ma è un po' complicato. Ecco una demo con alcuni aiuti che potresti trovare utili. Vogliamo che non sia hacky.
Lo faremo in due parti. Innanzitutto, fornendo un'API per indicare quando l'animazione è terminata. In secondo luogo, fornendo l'accesso di JavaScript agli pseudo-elementi. La seconda parte potrebbe essere un compito piuttosto impegnativo, ma sembra la cosa giusta da fare a lungo termine.
Ora vai a creare delle transizioni tra le visualizzazioni fantastiche.
Mi auguro che, come me, tu sia entusiasta del presente e del futuro di questa funzionalità. Se hai un feedback o vuoi semplicemente mostrare alcune transizioni di visualizzazione che hai creato, che siano fluide e funzionali o semplicemente semplici sciocche, contattaci su Twitter o Mastodon.