【JavaScript】View Transitions APIの使い方

はじめに

現代のウェブ開発において、ユーザーエクスペリエンス（UX）は非常に重要な要素となっています。
その中でも、ページ遷移の際の滑らかなアニメーションはユーザーにとって直感的で心地よい体験を提供します。

この記事では、直感的で心地よい体験を提供するために、View Transitions APIを用いて、簡単かつ効果的にページ遷移アニメーションを実装する方法をご紹介しようと思います。

View Transitions APIとは？

View Transitions APIは、ウェブページ間の遷移を滑らかにするための新しいAPIです。
このAPIを使用することで、異なる DOM でのアニメーションを実装することができます。

詳しくは、こちらをご覧ください！

View Transitions API の使い方

① HTMLファイル準備する

まずは、HTMLファイルを準備します！
以下のようなDOMを用意しました。

index.html

<!-- トランディション前のDOM -->
<div id="index">
  <h1>記事リスト</h1>
  <button className="listLink" id="open">
    【CSS・JavaScript】View Transitions APIの使い方
  </button>
</div>

<!-- トランディション後のDOM -->
<div id="show" hidden>
  <button id="close">戻る</button>
  <h1 className="listTitle">【CSS・JavaScript】View Transitions APIの使い方</h1>
</div>

HTMLファイルには、トランディション前と後のDOM両方を記述します。
そして、トランディション後のDOM には、hidden 属性を追加し、見えないようにします。

② CSSファイルを記載する

まずは、それぞれのスタイルシートに　@view-transition と view-transition-name を指定します。

index.css

@view-transition {
  navigation: auto;
}

.listLink {
  view-transition-name: show-title;
}

.listTitle {
  view-transition-name: show-title;
}

③ JavaScriptファイルを記述する

そして、次にJavaScriptファイルを用意します。

index.js

const button = document.getElementById("button");
const index = document.getElementById("index");
const show = document.getElementById("show");

button.addEventListener("click", () => {
  document.startViewTransition(() => {
    if (index && show) {
      index.hidden = true;
      show.hidden = false;
    }
  })
})

ボタンを押した時に、startViewTransition() を使い、hidden 属性を切り替え、ページ切り替え時のトランジションをします。

完成！！！

すると以下のGIF画像のようになります。

まとめ

この記事では、直感的で心地よい体験を提供するために、View Transitions APIを用いて、簡単かつ効果的にページ遷移アニメーションを実装する方法をご紹介しようと思います。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。