jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

AstroのView Transitionsを試してみる

Astro

Astro v2.9からページ遷移のアニメーションをAstroでつけることができるようになったため、少し検証してみた内容になります。

docs.astro.build

ページ全体に遷移アニメーションを追加したい場合

コード

  • astro.config.mjs
export default defineConfig({
  // experimentalを追加
  experimental: {
    viewTransitions: true,
  },
})
  • ページ共通の場所
---
import { ViewTransitions } from 'astro:transitions'
---

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- headの中に「ViewTransitions」を追加 -->
    <ViewTransitions />
  </head>

  <body>
    <!-- なにかのコンテンツ -->
  </body>
</html>

結果

サンプルページへ

ページ遷移しても状態を保持したい場合

コード

docs.astro.build

以下のコンポーネントを新規作成して、ページ全体の箇所に追加しています。

<video controls="" autoplay="" transition:persist>
  <source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>

結果

ページサンプル

ページ遷移時にスライドさせる

コード

<!-- アニメーションさせたいコンテンツにたいして、`transition:animate="slide"`を追加 -->
<body transition:animate="slide">
  <!-- なにかのコンテンツ -->
</body>

結果

ページサンプル