nash1111 Tech Blog

Home

Astro v3でサポートされたView Transitions APIを試す

この記事の内容

Astro v3 がView Transitions APIを組み込んだらしいので試しました
fade(デフォルトの挙動,滑らかに遷移)と slide(横から新しいコンテンツが現れる)を試しました

手順

index.astro

---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
  <head>
    <title>My Homepage</title>
    <ViewTransitions />
  </head>
  <body>
    <h2>ViewTransitions, fade</h2>
    <p><a href="fuga/">go fuga</a></p>
  </body>
</html>

fuga.astro

---
import { ViewTransitions } from 'astro:transitions';
---

<html lang="en">
  <head>
    <title>My Homepage</title>
    <ViewTransitions />
  </head>
  <body transition:animate="slide">
    <h1>transition:animate="slide"</h1>
    <p><a href="/">go home</a></p>
  </body>
</html>

動き

Youtubeにアップロードしました
なめらかに遷移して楽しかったです

参考

Astro v3 へのアップグレード