Vandaag willen we graag meer delen over de reis van Chrome en Astro met de View Transitions API . Dit omvat onder meer hoe de Astro-gemeenschap de API al vroeg omarmde en ermee experimenteerde, waardoor de mogelijkheden voor de bredere gemeenschap werden benadrukt. We zijn ook blij om meer te kunnen delen over de nieuwe ingebouwde ondersteuning voor View Transitions in Astro 3.0!
Achtergrond
Naadloze overgangen tussen verschillende statussen van een pagina, ook wel statusovergangen genoemd, zijn altijd een complex aspect geweest bij het bouwen van naadloze, geanimeerde ervaringen op internet. Ondanks de beschikbaarheid van tools zoals CSS-overgangen, CSS-animaties en de Web Animation API, is het creëren van statusovergangen een enorme klus gebleven. Een van de uitdagingen is het omgaan met interactie op uitgaande elementen, wat de transities complexer kan maken.
Bovendien is het moeilijk om de leespositie en focus bij hulpmiddelen te behouden. En het omgaan met verschillen in scrollpositie maakt statusovergangen tot een omslachtig proces. Al deze factoren dragen bij aan de complexiteit van het implementeren van vloeiende overgangen tussen verschillende elementen op een webpagina
De View Transitions API kwam naar voren als de browseroplossing voor deze uitdagingen. Deze nieuwe API biedt een eenvoudigere manier om de DOM in één stap te wijzigen en tegelijkertijd een geanimeerde overgang tussen twee statussen te creëren.
De lancering van de View Transitions API in Chrome 111 markeerde het begin van een bredere visie op transitieondersteuning voor alle websites, niet alleen op JavaScript gebaseerde webapplicaties. Toekomstige verbeteringen zijn ook onderweg. Chrome kan in de toekomst spannende toevoegingen onderzoeken, zoals overgangen tussen documenten, compositor-gestuurde animaties, scoped-overgangen en geneste overgangsgroepen.
Vroege verkenningen met weergaveovergangen
Het traject van Chrome met de View Transitions API stond niet op zichzelf. Feedback en samenwerking van ontwikkelaars, raamwerkauteurs en de CSS-werkgroep speelden allemaal een cruciale rol bij het vormgeven van de functie in de loop van een aantal jaren.
Experimenten met ontwikkelaars speelden al vroeg een cruciale rol. De eerste versies van de API ondersteunden geen CSS-animaties en overgangen waren beperkt tot een paar beperkende voorinstellingen. Vroege feedback maakte duidelijk dat ontwikkelaars wilden dat overgangen volledig aanpasbaar en expressief zouden zijn. Deze heen-en-weer-samenwerking zorgde ervoor dat de API werd ontworpen met een balans tussen goede standaardinstellingen, uitbreidbaarheid en maatwerk.
Astro was een van die raamwerken die al vroeg op View Transitions leunde. De rest van dit artikel is vanuit het gezichtspunt van het Astro-team en deelt hun ervaringen met het vinden, adopteren en centraal stellen van View Transitions in de webontwikkelingservaring.
Waarom Astro inzet op weergaveovergangen
Astro was al lang op zoek naar zoiets als View Transitions. Astro is een JavaScript-webframework dat uw UI-componenten op de server omzet in lichtgewicht HTML voor snellere laadprestaties van pagina's. Astro verplaatst opzettelijk zoveel mogelijk werk van het clientapparaat. Astro-websites gebruiken native browserpaginanavigatie, terwijl andere webframeworks de browsernavigatie kunnen kapen met JavaScript-client-side routing.
Deze afweging zorgde voor een uitdaging voor het Astro-team: hoe kon Astro pagina-overgangen animeren en app-achtige UI-persistentie op pagina's bieden zonder routering aan de clientzijde toe te passen?
Uitzichtovergangen waren het antwoord. Met View Transitions zou Astro dezelfde routeringsfuncties kunnen bieden die JavaScript-zware SPA-webframeworks boden, maar zonder de prestatie- en complexiteitsoverhead van routering aan de clientzijde. Andere raamwerken benaderden View Transitions als een optioneel implementatiedetail, maar voor Astro was het iets veel groters.
De volgende vraag die het Astro-team moest beantwoorden was: “hoe?” Het team keek voor inspiratie naar projecten als Turbo, Swup en Livewire en maakte zelfs een prototype van een paar vergelijkbare benaderingen binnen Astro.
Een van de eerste pogingen betrof een ‘slimme transitie’ die een volledige pagina besloeg, waarbij elke nieuwe HTML-pagina automatisch werd vergeleken met de huidige HTML en vervolgens werd geprobeerd elk element in één keer te vervangen met behulp van JavaScript. Het was slim, maar foutgevoelig.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Gelukkig liet de Astro-gemeenschap zien dat de View Transitions API al krachtig was zonder dat het product de zaken te ingewikkeld maakte. Na enkele vroege demo's te hebben gezien, was het Astro-team verkocht aan het idee van een eenvoudige Astro-API die de browser-API's zo goed mogelijk zou kunnen benaderen. In plaats van View Transitions te zien als een onzichtbaar implementatiedetail verborgen in Astro, zouden ze rechtstreeks aan de ontwikkelaar kunnen worden blootgesteld. Astro rechtstreeks op één lijn brengen met het webplatform en de algehele complexiteit aan de frontend verminderen.
---
// 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>
<!-- ... -->
Het werk werd eenvoudig: breng de nieuwe View Transitions API in Astro en zorg voor automatische fallbacks die naar zoveel mogelijk websites en browsers zouden gaan. Fallback-ondersteuning is essentieel, omdat de meeste browsers (buiten Chrome) nog geen volledige ondersteuning voor native View Transitions hebben geleverd.
Lancering van officiële ondersteuning in Astro
Astro heeft experimentele View Transitions-ondersteuning uitgebracht in Astro 2.9. De reacties waren meteen positief. Ontwikkelaars begonnen ongelooflijke demo's van zoveel verschillende gebruiksscenario's te delen, en in sommige gevallen zelfs alles naar productie te brengen.
Astro 3.0 voltooit de ondersteuning en deactiveert de nieuwe View Transitions API voor iedereen. U kunt deze nieuwe API's nu experimenteel of in één keer gebruiken.
<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>
Een onverwacht voordeel van het afstemmen van Astro op de platform-API's is de mogelijkheid om te experimenteren met het bouwen van nieuwe functies bovenop de native View Transitions API. De nieuwe Astro transition:persist richtlijn zorgt er bijvoorbeeld voor dat elk element zichzelf blijft behouden tijdens een navigatie op een volledige pagina. Dit drijft elementen met een lange levensduur aan, zoals persistente audio- en videospelers, iets dat voorheen alleen mogelijk was in zware JavaScript SPA's.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Het staat Astro ook vrij om View Transitions ergonomischer te maken voor de ontwikkelaar. Het team heeft bijvoorbeeld al ondersteuning toegevoegd voor aangepaste voorwaartse/achterwaartse animaties en animaties voor dynamische HTML. Beide functies zijn moeilijk uit te voeren met alleen de API's op een lager niveau, maar in Astro zijn ze vrijwel moeiteloos.
Deze functies zijn voorlopig alleen beschikbaar in Astro, maar het Astro-team hoopt hun ervaringen terug te koppelen aan de auteurs van de specificaties en werkgroepen voor mogelijke browserverbeteringen in de toekomst. Bijvoorbeeld door een voorstel nauwlettend in de gaten te houden om het delen van animaties in CSS makkelijker te maken.
Wat volgt?
De toekomst voor View Transitions op internet ziet er rooskleurig uit. Astro, Nuxt en HTMX hebben allemaal een zekere mate van ondersteuning geleverd, en vele anderen hebben interesse getoond.
Het Chrome-team is enthousiast over Astro's eigen View Transitions-ondersteuning. Het is een grote stap voor webontwikkeling, waardoor vloeiendere en dynamischere gebruikerservaringen mogelijk worden. Ontwikkelaars, we moedigen jullie aan om je te verdiepen in View Transitions in Astro 3.0. Of u nu nieuwe landingspagina's maakt of bestaande sites upgradet, deze verbeteringen zijn gamechangers. View Transitions heeft geholpen de leemte op te vullen tussen wat mogelijk was met SPA's en MPA's. Chrome hoort graag van u of er nog lacunes zijn in de ondersteuning voor SPA en/of MPA. Voel je vrij om commentaar te geven op de View Transitions WICG GitHub-repository om dit verder te bespreken.
We zijn al geïnspireerd door de innovatieve demo's en toepassingen die we hebben gezien, en we willen graag meer zien. Uw werk met View Transitions geeft vorm aan de toekomst van het internet. Probeer View Transitions eens uit in Astro, deel uw werk en laten we deze reis samen voortzetten.