Astro
View transitions
View transitions is the browser mechanism Astro uses to animate between pages without a full reload. Astro's ClientRouter swaps the page in place.
How it is measured
Add the ClientRouter component to the layout head. Links are intercepted, the new page is fetched, and the DOM is replaced inside a transition. Directives like transition:persist keep an element alive across pages.
Test by clicking through three pages with the network panel open. You should see HTML fetches, not full document loads. Scripts that ran on load need to rerun on the astro:page-load event.
Worked example
A portfolio keeps an audio player in the footer with transition:persist. Moving between 12 project pages, the music keeps playing and the header fades. Each navigation fetches about 9 KB of HTML.
A contact-form script bound on first load stops working after one navigation. Moving its setup into an astro:page-load listener fixes it.
How it differs
View transitions make navigation feel continuous in a multi-page site. Client-side rendering builds the page in the browser from data. Transitions exclude moving rendering to the client; CSR excludes server-built HTML per page.
Common errors
Leaving scripts that run once. Assuming analytics fire on navigation. Persisting heavy elements. Ignoring reduced motion. Testing only in one browser.
In practice
Add it to one layout and click through the site. Check that your analytics script records each navigation. Respect the reduced motion setting.