L'API View Transizione consente di aggiornare il DOM in un solo passaggio, generando al contempo una transizione animata tra i due stati.
Questi tipi di transizioni erano una funzionalità molto richiesta dagli sviluppatori, me compreso, e penso che siamo riusciti a trovare un equilibrio tra buone impostazioni predefinite ed estensibilità e personalizzazione. Sembra che ci stiamo dando una pacca sulla spalla, ma i feedback degli sviluppatori sono stati fondamentali per il design di questa funzionalità. Un precedente prototipo di questa funzionalità era molto meno flessibile e le persone (come te?) che si sono prese del tempo per giocare con i prototipi e fornire feedback hanno scatenato una ripensamento totale. Grazie!
Per familiarizzare con la funzionalità e provare alcune demo, consulta la nostra guida. Se ritieni che ci sia qualcosa che non è trattato al riguardo, contattaci su Twitter, Mastodon o via email.
L'API View Transizione attualmente è disponibile solo in Chrome; per fortuna può essere utilizzata come miglioramento progressivo. La guida include una funzione helper che puoi utilizzare in vari browser, ma solo i browser che supportano le transizioni di visualizzazione riceveranno l'animazione.
Abbiamo sviluppato questa funzionalità all'interno del CSS Working Group, sulla base del contributo di altri fornitori di browser e indipendenti. Non sappiamo se o quando altri browser adotteranno le transizioni delle visualizzazioni, ma tieni d'occhio la posizione degli standard di Mozilla e la posizione degli standard di WebKit.
Ma non abbiamo ancora finito!
La funzionalità di Chrome 111 è solo la prima release. Ci auguriamo di aver già trovato tutti i bug, ma ti invitiamo a segnalare eventuali problemi all'indirizzo crbug.com, preferibilmente con una demo ridotta. Se non ti è familiare o ti senti a tuo agio, contattaci su Twitter, Mastodon o via email e ti aiuterò.
Questa release è una parte ridotta, ma speriamo, utile di un quadro più ampio. Abbiamo già delineato alcune estensioni per questa funzionalità per garantire che i componenti che spediamo oggi siano compatibili con il futuro.
Ecco un'anteprima delle nostre opinioni. Non sono in ordine di priorità (forse, la prima è probabilmente la più importante per molte persone), quindi ci piacerebbe ricevere un tuo feedback su quali aggiunte sono più importanti per te.
Transizioni tra i documenti
Questa è quella a cui la maggior parte degli sviluppatori vorrebbe che lavoreremo dopo e la buona notizia è che ci stiamo già lavorando.
L'API View Transiziones è stata progettata in modo da poter funzionare su documenti della stessa origine. L'unica differenza è che, invece di startViewTransition, indica la modifica dello stato del DOM, è la navigazione stessa a segnalarla.
Il nostro prototipo dietro la bandiera 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 stiamo utilizzando un meta tag: <meta name="view-transition" content="same-origin">, ma riteniamo che CSS sia un posto migliore per questo scopo. Vogliamo inoltre rendere più semplice sapere da quale pagina stai eseguendo la transizione, preferibilmente senza dover scrivere codice JavaScript.
C'è molto lavoro da fare e vorremmo piuttosto ottenere risultati "giusti" piuttosto che "veloci", ma è sicuramente una priorità per noi.
Animazioni basate su compositor
Abbiamo scelto di animare la larghezza e l'altezza sui gruppi di transizione per impostazione predefinita, poiché è molto più facile da personalizzare. Tuttavia, ciò significa che l'animazione viene eseguita sul thread principale, il che non è l'ideale, in particolare durante il caricamento di pagina.
Prevediamo di rilevare le animazioni predefinite e le personalizzazioni comuni e di reinterpretarle come animazioni guidate dal compositore per migliorare le prestazioni.
Transizioni mirate
Al momento, l'ambito delle transizioni SPA riguarda l'intero documento e può essere eseguita una sola transizione alla volta. Desideriamo presentare una funzionalità che consente di limitare l'ambito delle transizioni a un determinato elemento in modo che più componenti della pagina possano eseguire le transizioni in modo indipendente.
Ciò consentirebbe, ad esempio, a un video player incorporato di utilizzare le transizioni di visualizzazione contemporaneamente a un widget di chat incorporato.
Gruppi di transizione nidificati
Al momento, tutti i membri (::view-transition-group) sono fratelli e sorelle. Questo è spesso un aspetto positivo, in quanto consente di passare le visualizzazioni da un contenitore a un altro senza doverti preoccupare di tagliare i contenuti.
Tuttavia, a volte potresti voler tagliare una visualizzazione da parte di un genitore, che potrebbe essere coinvolto anche nella transizione.
Vogliamo esaminare un'attivazione che posiziona un determinato ::view-transition-group all'interno di un altro ::view-transition-group.
Classi di transizioni
Ogni elemento view-transition-name deve essere univoco. In questo modo, identifichiamo che un particolare elemento è concettualmente "lo stesso" ai lati della modifica del DOM, anche se non è letteralmente lo stesso elemento.
Tuttavia, a volte gli oggetti con view-transition-name diversi dovrebbero usare lo stesso tipo di animazione. Al momento, ciò significa aggiungere una regola del selettore per ogni view-transition-name.
Vorremmo aggiungere un modo per creare classi di transizioni per superare questo limite.
Ignora gli elementi fuori schermo
Se assegni un elemento a un elemento view-transition-name, questo verrà coinvolto nella transizione come gruppo a sé stante. A volte questo non è l'ideale. Ad esempio, se assegni un'intestazione a view-transition-name e passi da uno stato in cui è stato fatto scorrere verso il basso di 2000 pixel a uno stato nella parte superiore della pagina, l'animazione dell'intestazione verrà eseguita a una distanza di 2000 pixel, il che sembra errato 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 si trova interamente all'esterno dell'area visibile.
Puoi già farlo con JavaScript impostando in modo dinamico style.viewTransitionName, ma sembra che dovremmo avere una soluzione dichiarativa.
Animazioni basate su requestAnimationFrame
Puoi già creare animazioni di visualizzazione delle transizioni con JavaScript tramite l'API Web Animazioni, ma a volte hai bisogno di perfezionare i frame per fotogramma con requestAnimationFrame.
Puoi già farlo, ma è un po' complicato. Ecco una demo con alcuni assistenti che potrebbero esserti utili. Vogliamo che non sia pericoloso.
Lo faremo in due parti. Uno: fornendo un'API per indicare quando l'animazione è terminata. E due, fornendo l'accesso in JavaScript agli pseudo-elementi. Quella seconda parte potrebbe essere un lavoro piuttosto impegnativo, ma sembra la cosa giusta da fare a lungo termine.
Ora realizza delle transizioni straordinarie.
Spero che, come me, tu sia entusiasta del presente e del futuro di questa funzionalità. Se hai feedback o se vuoi semplicemente mostrare alcune transizioni di visualizzazione che hai effettuato, che siano semplici e funzionali o semplicemente semplici insensati, contattaci su Twitter o Mastodon.