Oggi vogliamo condividere maggiori informazioni sul percorso di Chrome e Astro con l'API View Transitions. Ad esempio, la community di Astro ha adottato e sperimentato l'API in anteprima, mettendo in evidenza le possibilità per la community più ampia. Siamo inoltre lieti di condividere maggiori informazioni sul nuovo supporto integrato per le transizioni di visualizzazione in Astro 3.0.
Sfondo
Le transizioni fluide tra stati diversi di una pagina, note come transizioni di stato, sono sempre state un aspetto complesso della creazione di esperienze animate senza interruzioni sul web. Nonostante la disponibilità di strumenti come le transizioni CSS, le animazioni CSS e l'API Web Animation, la creazione di transizioni di stato è rimasta un'impresa ardua. Una delle sfide è gestire l'interazione con gli elementi in uscita, il che può rendere le transizioni più complesse.
Inoltre, è difficile mantenere la posizione di lettura e l'attenzione per i dispositivi per la disabilità. Inoltre, gestire le differenze di posizione dello scorrimento rende le transizioni di stato un processo complicato. Tutti questi fattori contribuiscono alla complessità dell'implementazione di transizioni fluide tra i vari elementi di una pagina web
L'API View Transitions è emersa come la soluzione del browser a questi problemi. Questa nuova API offre un modo più semplice per modificare il DOM in un unico passaggio, creando al contempo una transizione animata tra due stati.
Il lancio dell'API View Transitions in Chrome 111 ha segnato l'inizio di una visione più ampia per il supporto delle transizioni per tutti i siti web, non solo per le applicazioni web basate su JavaScript. Sono in arrivo anche miglioramenti futuri. In futuro, Chrome potrebbe esplorare interessanti aggiunte come transizioni tra documenti, animazioni basate su compositore, transizioni basate su ambito e gruppi di transizioni nidificati.
Prime esplorazioni con le transizioni di visualizzazione
Il percorso di Chrome con l'API View Transitions non è stato solitario. Il feedback e la collaborazione di sviluppatori, autori di framework e del gruppo di lavoro CSS hanno avuto un ruolo fondamentale nella definizione della funzionalità nel corso di diversi anni.
La sperimentazione degli sviluppatori ha avuto un ruolo fondamentale all'inizio. Le prime versioni dell'API non supportavano le animazioni CSS e le transizioni erano limitate a poche preimpostazioni restrittive. I primi feedback hanno chiarito che gli sviluppatori volevano transizioni completamente personalizzabili ed espressive. Questa collaborazione ha permesso di progettare l'API con un equilibrio di valori predefiniti, estensioni e personalizzazioni efficaci.
Astro è stato uno dei framework che ha adottato per primi le transizioni di visualizzazione. Il resto di questo articolo è scritto dal punto di vista del team di Astro e condivide la sua esperienza di ricerca, adozione e messa in primo piano delle transizioni di visualizzazione nell'esperienza di sviluppo web.
Perché Astro ha scommesso sulle transizioni di visualizzazione
Astro cercava da tempo qualcosa di simile alle transizioni di visualizzazione. Astro è un framework web JavaScript che esegue il rendering dei componenti dell'interfaccia utente in HTML leggero per migliorare le prestazioni di caricamento della pagina. Astro sposta intenzionalmente il maggior numero possibile di attività dal dispositivo client. I siti web di Astro utilizzano la navigazione nelle pagine del browser nativo, mentre altri framework web potrebbero compromettere la navigazione del browser con il routing lato client di JavaScript.
Questo compromesso ha creato una sfida per il team di Astro: come poteva Astro animare le transizioni di pagina e garantire la persistenza dell'interfaccia utente simile a un'app tra le pagine senza adottare il routing lato client?
La risposta è stata Visualizza transizioni. Con le transizioni di visualizzazione, Astro poteva fornire le stesse funzionalità di routing offerte dai framework web SPA basati su JavaScript, ma senza il sovraccarico di prestazioni e complessità del routing lato client. Altri framework hanno affrontato le transizioni di visualizzazione come un dettaglio di implementazione facoltativo, ma per Astro si trattava di qualcosa di molto più grande.
La domanda successiva a cui il team di Astro ha dovuto rispondere era "come?". Il team si è ispirato a progetti come Turbo, Swup e Livewire e ha persino creato il prototipo di alcuni approcci simili in Astro.
Uno dei primi tentativi prevedeva una "transizione intelligente" a pagina intera che confrontava automaticamente ogni nuova pagina HTML con quella corrente e poi tentava di sostituire tutti gli elementi contemporaneamente utilizzando JavaScript. Era intelligente, ma soggetta a errori.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Fortunatamente, la community di Astro ha dimostrato che l'API View Transitions era già potente senza complicare eccessivamente il prodotto. Dopo aver visto alcune demo iniziali, il team di Astro ha sposato l'idea di una semplice API Astro che potesse corrispondere il più possibile alle API del browser. Invece di vedere le transizioni di visualizzazione come un dettaglio di implementazione invisibile nascosto all'interno di Astro, potrebbero essere esposte direttamente allo sviluppatore. Allineamento diretto di Astro alla piattaforma web e riduzione della complessità complessiva sul frontend.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
Il lavoro è diventato semplice: integrare la nuova API View Transitions in Astro e fornire soluzioni di riserva automatiche che consentano di raggiungere il maggior numero possibile di siti web e browser. Il supporto alternativo è essenziale, perché la maggior parte dei browser (diversi da Chrome) non ha ancora implementato il supporto completo per le transizioni di visualizzazione native.
Lancio dell'assistenza ufficiale in Astro
Astro ha rilasciato il supporto sperimentale delle transizioni di visualizzazione in Astro 2.9. La risposta è stata positiva immediatamente. Gli sviluppatori hanno iniziato a condividere demo incredibili di molti casi d'uso diversi e, in alcuni casi, hanno persino implementato tutto in produzione.
Astro 3.0, completa il supporto e annulla il flag della nuova API View Transitions per tutti. Queste nuove API sono ora pronte per essere adottate in via sperimentale o tutte contemporaneamente.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Un vantaggio imprevisto dell'allineamento di Astro con le API di piattaforma è la possibilità di sperimentare la creazione di nuove funzionalità sulla base dell'API View Transitions nativa. Ad esempio, la nuova istruzione Astro transition:persist consente a qualsiasi elemento di persistere durante la navigazione in una pagina intera. In questo modo è possibile utilizzare elementi di lunga durata come player audio e video permanenti, una funzionalità che in precedenza era possibile solo nelle SPA JavaScript pesanti.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Astro è anche libero di rendere le transizioni di visualizzazione più ergonomiche per lo sviluppatore. Ad esempio, il team ha già aggiunto il supporto per le animazioni avanti/indietro personalizzate e le animazioni per HTML dinamico. Entrambe queste funzionalità sono difficili da realizzare solo con le API di livello inferiore, ma in Astro sono praticamente senza sforzo.
Per il momento queste funzionalità sono disponibili solo in Astro, ma il team di Astro spera di condividere la propria esperienza con gli autori delle specifiche e i gruppi di lavoro per potenziali miglioramenti del browser in futuro. Ad esempio, monitorando attentamente una proposta per semplificare la condivisione delle animazioni in CSS.
E dopo?
Il futuro delle transizioni di visualizzazione sul web è roseo. Astro, Nuxt e HTMX hanno tutti implementato un certo livello di supporto e molti altri hanno espresso il proprio interesse.
Il team di Chrome è entusiasta del supporto nativo delle transizioni di visualizzazione di Astro. Si tratta di un grande passo avanti per lo sviluppo web, in quanto consente esperienze utente più fluide e dinamiche. Sviluppatori, vi invitiamo a scoprire di più sulle transizioni di visualizzazione in Astro 3.0. Che tu stia creando nuove pagine di destinazione o eseguendo l'upgrade di siti esistenti, questi miglioramenti sono fondamentali. Le transizioni di visualizzazione hanno contribuito a colmare il divario tra ciò che era possibile con le SPA e le MPA. Chrome vorrebbe sapere se ci sono ulteriori lacune nel supporto di SPA e/o MPA. Non esitare a commentare il repository GitHub WICG relativo alle transizioni di visualizzazione per discuterne ulteriormente.
Siamo già ispirati dalle demo e dalle applicazioni innovative che abbiamo visto e non vediamo l'ora di vederne altre. Il tuo lavoro con le transizioni di visualizzazione sta plasmando il futuro del web. Prova le transizioni di visualizzazione in Astro, condividi il tuo lavoro e continuiamo questo viaggio insieme.