Day27 - Astro Series: View Transitions

Astro Series Day 27: View Transitions

@ Astro

A beautiful gradient background with a heading: "View Transitions"

Introduction

This chapter covers Astro 3.0’s most eye-catching feature: View Transitions, which lets your static site achieve the same smooth feel as an app.

Because this technology is still experimental, additional details are placed in later sections.

Why View Transitions?

View Transitions API🔗 is an API that browsers are rolling out, providing an easy way to add transition effects to any DOM state change. This technique can be applied to smaller areas like content swaps or to broader scopes such as page-to-page transitions.

This is an evolving standard; currently roughly 65% of browsers support it. You can use it with progressive enhancement🔗. Beyond being visually impressive, it helps guide visual flow, reduces perceived waiting time, and improves user experience.

Astro and View Transitions

In Astro you can very easily enable the following during static page switches:

  • Morphing animations for elements shared between pages
  • Fade or slide in/out animations for elements
  • Preserve shared UI elements without a full page refresh

Simply add <ViewTransitions /> to the <head> of each page to use ViewTransition animations on that page.

---
// 對所有想添加 View Transition 的頁面添加 "<ViewTransitions />" component
import {ViewTransitions} from 'astro:transitions';
---
<head>
  <title>My View Transition Demo</title>
  <ViewTransitions />
</head>
<body>
  <!-- -->
</body>

After that, navigating the site will feel as smooth as an SPA (Single Page Application); new content loads without a page refresh.

Morphing elements between pages

If page A has a heading and page B has the same heading, and you want a transition when switching pages, bind the same transition:name to the corresponding components:

<aside transition:name="hero">

That will add a transition animation for that component when switching pages.

Preserving element state across pages

Sometimes you want to keep the previous page’s state when navigating. Use transition:persist, which also works with island components.

<Counter client:load transition:persist count={5} />

Fallbacks

You can set different fallback options on <ViewTransitions> to describe what should happen when the browser does not support it. The current choices are:

  • animate (default, recommended) - Astro will simulate the animation, although this feature is not yet complete and has no effect🔗.
  • swap - Astro will replace the page directly.
  • none - Astro will do a full page reload to load the new page.
<ViewTransitions fallback="swap">

Conclusion

Astro provides an easy way for static sites to use the Transition API, enabling traditional static sites to upgrade to an app-like experience.

Further reading