Oggi vorremmo condividere di più sul percorso di Chrome e Astro con l'API View Transiziones. Ciò include il modo in cui la community di Astro ha abbracciato e sperimentato l'API fin dall'inizio, evidenziando le possibilità per una comunità più ampia. Inoltre, siamo lieti di condividere maggiori dettagli sul supporto integrato per le transizioni delle visualizzazioni in Astro 3.0.
Contesto
Le transizioni senza interruzioni tra i diversi stati di una pagina, note come transizioni di stato, sono sempre state un aspetto complesso della creazione di esperienze animate e fluide sul web. Nonostante la disponibilità di strumenti come le transizioni CSS, le animazioni CSS e l'API Web Animation, creare transizioni di stato è sempre un'impresa ardua. Una delle sfide è gestire l'interazione sugli elementi in uscita, il che può rendere le transizioni più complesse.
Inoltre, mantenere il punto di lettura e la messa a fuoco per i dispositivi per la disabilità è difficile. Inoltre, la gestione delle differenze di posizione di scorrimento rende le transizioni di stato un processo ingombrante. Tutti questi fattori contribuiscono alla complessità dell'implementazione di transizioni fluide tra i vari elementi di una pagina web.
L'API View Transiziones è emersa come la soluzione del browser a queste sfide. Questa nuova API offre un modo più semplice per modificare il DOM in un solo passaggio, creando al contempo una transizione animata tra due stati.
Il lancio dell'API View Transiziones in Chrome 111 ha segnato l'inizio di una visione più ampia del supporto della transizione per tutti i siti web, non solo per le applicazioni web basate su JavaScript. Anche i miglioramenti futuri sono in arrivo. In futuro Chrome potrebbe esplorare nuove funzionalità, ad esempio transizioni tra documenti, animazioni basate sul compositore, transizioni mirate e gruppi di transizioni nidificati.
Visita la demo: Dal vivo, Fonte
Esplorazioni iniziali con transizioni di visualizzazione
Il percorso di Chrome con l'API View Transiziones non è stato isolato. Il feedback e la collaborazione da parte di sviluppatori, autori del framework e del gruppo di lavoro CSS hanno tutti avuto un ruolo cruciale nel dare forma a questa funzionalità nel corso di diversi anni.
La sperimentazione degli sviluppatori ha avuto un ruolo fondamentale fin dall'inizio. Le versioni precedenti dell'API non supportavano le animazioni CSS e le transizioni erano limitate ad alcuni valori preimpostati restrittivi. I primi feedback chiarivano che gli sviluppatori volevano che le transizioni fossero completamente personalizzabili ed espressive. Questa collaborazione continua ha assicurato che l'API fosse progettata con un equilibrio tra buone impostazioni predefinite, estensibilità e personalizzazione.
Astro è stato uno di quei framework che si sono affidati presto alle transizioni delle visualizzazioni. Il resto di questo articolo è presentato dal team di Astro e condivide la sua esperienza nella ricerca, nell'adozione e nell'introduzione delle transizioni delle visualizzazioni in primo piano nell'esperienza di sviluppo web.
Perché scommettere su Astro sulle transizioni delle visualizzazioni
Astro cercava da molto tempo qualcosa come "Visualizza transizioni". Astro è un framework web JavaScript che il server esegue il rendering dei componenti dell'interfaccia utente in formato HTML leggero per prestazioni di caricamento pagina più rapide. Astro sposta intenzionalmente la maggior parte del lavoro dal dispositivo client. I siti web di Astro utilizzano la navigazione nelle pagine del browser nativa, dove 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: in che modo Astro può animare le transizioni di pagina e fornire una persistenza dell'interfaccia utente simile a quella di un'app tra le pagine senza adottare il routing lato client?
Guarda Transizione da è stata la risposta. Con le transizioni delle visualizzazioni, Astro è stato in grado di fornire le stesse funzionalità di routing offerte dai framework web di SPA con utilizzo di JavaScript, ma senza l'overhead in termini di prestazioni e complessità del routing lato client. Altri framework si sono rivolti a View Transiziones come dettaglio di implementazione facoltativo, ma per Astro si è trattato di qualcosa di molto più grande.
La domanda successiva al team di Astro doveva rispondere: "come?". Il team ha preso spunto da progetti come Turbo, Swup e Livewire e ha persino prototipato alcuni approcci simili all'interno di Astro.
Uno dei primi tentativi ha comportato una "transizione intelligente" a pagina intera che confrontava automaticamente ogni nuova pagina di HTML con l'HTML corrente e quindi tentava di sostituire ogni elemento contemporaneamente utilizzando JavaScript. È 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 Transiziones era già potente e il prodotto non complicava troppo le cose. Dopo aver visto le prime demo, il team di Astro si è convinto all'idea di una semplice API Astro che potesse avvicinarsi il più possibile alle API del browser. Invece di vedere le transizioni di tipo View come un dettaglio di implementazione invisibile nascosto in Astro, potrebbero essere esposte direttamente allo sviluppatore. Allineare Astro direttamente alla piattaforma web e ridurre la complessità generale 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: abbiamo introdotto la nuova API View Transiziones in Astro e sono stati forniti elementi di riserva automatici che avrebbero portato al maggior numero possibile di siti web e browser. Il supporto di riserva è essenziale, perché la maggior parte dei browser (diversi da Chrome) non ha ancora fornito il supporto completo per le transizioni di tipo View native.
Lancio del supporto ufficiale in Astro
Astro ha rilasciato il supporto sperimentale per le transizioni View in Astro 2.9. La risposta è stata immediatamente positiva. Gli sviluppatori hanno iniziato a condividere demo incredibili di tanti casi d'uso diversi e, in alcuni casi, hanno persino distribuito il tutto in produzione.
Visita la demo: Dal vivo, Fonte
Astro 3.0 finalizza il supporto e annulla la segnalazione della nuova API View Transiziones per tutti gli utenti. Queste nuove API sono ora pronte per l'adozione sperimentale o una volta sola.
<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 inaspettato dell'allineamento di Astro con le API della piattaforma è la possibilità di sperimentare la creazione di nuove funzionalità sull'API nativa View Transiziones. Ad esempio, la nuova istruzione Astro transition:persist consente a qualsiasi elemento di persistere da solo durante la navigazione a pagina intera. Questo è alla base di elementi di lunga durata come audio e video player permanenti, una funzionalità che prima era possibile solo nelle SPA JavaScript di massa.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Visita la demo: Dal vivo, Fonte
Astro è anche senza costi per rendere le transizioni di visualizzazione più ergonomiche per lo sviluppatore. Ad esempio, il team ha già aggiunto il supporto per le animazioni e le animazioni personalizzate avanti/indietro per l'HTML dinamico. Entrambe queste funzionalità sono difficili da utilizzare solo con le API di livello inferiore, ma in Astro sono praticamente semplici.
Per il momento queste funzioni sono disponibili solo in Astro, ma il team di Astro spera di fornire la propria esperienza agli autori delle specifiche e ai gruppi di lavoro per potenziali miglioramenti del browser in futuro. Ad esempio, monitorando attentamente una proposta per semplificare la condivisione di animazioni in CSS.
E dopo?
Il futuro di View Transiziones sul Web è roseo. Astro, Nuxt e HTMX hanno fornito tutti un certo grado di supporto e molti altri hanno espresso interesse.
Il team di Chrome è entusiasta del supporto nativo di View Transactions di Astro. Costituisce un grande passo per lo sviluppo web, in quanto consente esperienze utente più fluide e dinamiche. Consigliamo agli sviluppatori di approfondire le transizioni delle visualizzazioni in Astro 3.0. Che tu stia creando nuove pagine di destinazione o eseguendo l'upgrade di siti esistenti, questi miglioramenti possono cambiare le regole del gioco. Le transizioni di tipo "Visualizza le transizioni" hanno contribuito a colmare il divario tra le APS e gli MPA. Chrome vorrebbe sapere se esistono ulteriori lacune nel supporto di SPA e/o MPA. Lascia un commento sul repository GitHub di View Transactions WICG per discutere più a fondo.
Abbiamo già preso ispirazione dalle applicazioni e dalle demo innovative a cui abbiamo assistito e non vediamo l'ora di saperne di più. Il lavoro con le transizioni vista sta plasmando il futuro del web. Prova View Transiziones in Astro, condividi il tuo lavoro e continuiamo questo viaggio insieme.