見出し画像

View Transition API で遷移アニメーション

yudai.ninomiya

今回は、View Transition API で遷移アニメーションの方法を紹介します。
今まで、私は、画面遷移時のアニメーションには、遷移先でローディングアニメーションを入れたり、animationやtransition、実行タイミングをずらしたりなど、絶え間ない実装したりしていました。
とうとうその努力が報われる時がやってきます。それが「View Transition API 」。
View Transitions APIは、画面遷移前のDOMと遷移後のDOM間でアニメーションさせることができます。
その方法や、どんなもの？メリットは？などを紹介していきます。

View Transitions API とは？

View Transitions APIは、異なるDOM間でもアニメーションさせることができるAPIになります。
従来、DOMの状態変更時にスムーズなトランジションを実現するには、JavaScript で細かいアニメーション制御やスタイルの変更を行う必要がありました。しかし、View Transitions APIを使うと、ページの表示を切り替える際に自動的にトランジション効果が適用され、ユーザーに滑らかな視覚体験を提供することができます。

主な機能

  • ページ遷移のアニメーション化：ページ間の遷移をアニメーションでつなげることができます。例えば、リンクをクリックしてページが切り替わるときに、前後のページ要素をシームレスにアニメーションで繋げることが可能です。

  • DOM間の要素の移動アニメーション：ページ内で、特定の要素を別の位置に移動させる場合にも、スムーズなトランジションが自動的に適用されます。これにより、複数の要素の位置変更を行う際のアニメーションを簡潔に設定できます。

  • CSSカスタマイズのサポート：View Transitions APIを使ったアニメーションは CSS を使用してカスタマイズすることができ、サイト全体で一貫したトランジションデザインを提供できます。例えば、トランジションのスピードやイージングを CSSで設定可能です。

使うメリットは？

View Transitions APIを使うメリットは、UIのトランジションやアニメーションを簡単に実装し、ユーザー体験を向上させる部分にあります。下記が主なメリットですが、ユーザー体験の向上によるサイトの回遊率の向上も期待できると思っています。

1. シームレスでスムーズなトランジション

  • View Transitions APIにより、ページ間やDOM要素間のトランジションがシームレスに行えます。ページ遷移時の「瞬間的な切り替わり」から「アニメーション付きの滑らかな遷移」に変わることで、コンテンツの連続性が感じられ、ユーザー体験が大きく向上します。

2. 開発コストの削減

  • アニメーションやトランジションはJavaScriptやCSSで複雑な制御が必要でしたが、View Transitions APIでは簡潔なコードで実装できるため従来より開発コストを大幅に削減できます。

対応ブラウザ

現在、Firefox では未実装となっています。サイト制作の要件によって、選定を行う方が良いでしょう。
View Transitions API (single-document) | Can I use... Support tables for HTML5, CSS3, etc

実装方法

簡単な実装方法をご紹介します。

  • blog/index.html (ブログ一覧を想定)

  • blog/detail/index.html　(ブログ詳細を想定)

まずはcssで、@view-transitionを指定することで、マルチ・ページ・アプリケーションにおける画面遷移アニメーションが適用可能になります。

style.css

@view-transition {
  navigation: auto;
}

そして、アニメーションで変化させたい要素に対して、cssで、同じview-transition-nameを付与します。


blog/index.html

<!-- 一覧画面 -->
<div class="blog">
  <img class="blog__thumnail" 
      src="images/photo_1.webp" />
</div>

blog/detail/index.html

<!-- 詳細画面 -->
<div class="blog-detail">
  <img class="blog-detail__thumnail" 
      src="images/photo_1.webp" />
</div>

style.css

.blog__thumnail {
	view-transition-name: transition-example;
	contain: paint;
}
.blog-detail__thumnail {
	view-transition-name: transition-example;
	contain: paint;
}

たったこれだけで、画面遷移時にアニメーションが適用されます。

まとめ

以前は、JavaScriptやcssを書いて、時間差や、秒数を事細かく指定していたアニメーションも、View Transition API によって手軽に、リッチな表現と、ユーザー体験も向上も行うことができるようになってきました。
実際にで使う場合はいくつか気を付けるポイントもありますが、要件を満たす案件では、ぜひ試してみてください。

いいなと思ったら応援しよう！