komura-c.log

komura-cのWeb技術、音、生活のメモの備忘ログ

当サイトをAstro3.0にアップデートしました🎉

作成 更新

はじめに

Astro 3.0 | Astroを見ました。 View Transitions APIがMPAでも使えるという話が出てきていて、そろそろ試そうかと思っていた頃だったので、 Astro View Transitionsという表記に惹かれました。 また、リリースブログでこのようにメタフレームワークがサポートするというのが僕が見る限り初めてだったこともあり、 試してみることにしました。

Astro2.3からのアップデート

まず、このサイトはAstroでSSGをしているのですが、Astroのバージョンが[email protected]→2.3.0に4月に上げてから触れていなかったのでアップデートしました。 [email protected]からでContent Collectionsという機能が入り、 この移行は少し変更が多かったですが、今回は比較的少なく移行ができました。 astroはドキュメントが充実しているので、 Upgrade to Astro v3に沿って影響ある箇所を数行変更するだけで、移行ができました。

Astro View Transitions

いよいよ本題です。 Astro View Transitionsを見ながらAstro上でView Transitionsを使いました。

はじめに、headタグの中でAstroが用意してくれているViewTransitionsのComponentを記述します。 また、transitionを明示的に指定した箇所のみ適応するためにhtmlタグにtransition:animate="none"属性を記述します。

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

<html lang="ja" transition:animate="none">
  <head>
    <ViewTransitions />
  </head>

Animationをカスタムしない場合は、ビルトインでfadeslideがあるのでどちらかを使用します。

--
import { fade } from "astro:transitions";
--
  <main transition:animate={fade({ duration: '0.5s' })}>

もうこれだけで、ページ遷移時に指定したViewTransitionのアニメーションが動いてくれます。 ただ、ViewTransitionAPIの凄い所の1つは指定した要素をリッチに遷移させることができることです。 次のように、transition:name属性を遷移前と遷移後のページで指定します。(遷移前と遷移後のページ双方で一意でないと上手く要素が特定できないため、動きません)

<time datetime={post.pubDate} transition:name={"blog-pub-date-" + post.slug}>

すると、このWebサイトのようなアニメーションが実現できます。 ちなみに、iOSのSafariがViewTransitionに対応していないため、fallbackオプションで遷移アニメーションを無効にするなどの対応ができます。

<ViewTransitions fallback="swap">

おわりに

このページの遷移を確認したいために、新しく記事を書こうと思って凄く雑に書いてみました。 コードはkomura-c/komura-c.github.ioにあります。

紹介しなかった機能としては、ViewTransitionsのAnimationはカスタムで作ることができて拡張性があることや、Astroではtransition:persist属性をタグに付与することで、ページ間でそのHTML要素の状態を維持できるなどの機能があるなどがあります。 ViewTransitionsAPIは、まだExperimentalではありますが、MPAでもSPAのような遷移ができかなり便利なAPIなので、 ブラウザ対応が進めば一般的に使われ、SPAのみを選択するケースはより少なくなっていくのかなと感じました。 ここまで読んでいただきありがとうございました。


> 一覧に戻る