Blazor でも View Transition したい

Web ブラウザの View Transition 機能

ここでいう "View Transition" というのは、Web ブラウザが提供する機能のことで、2 つの表示状態の遷移にアニメーション効果を付けることのできる、JavaScript API として公開されている機能です。

下記リンク先の冒頭の動画がわかりやすいです。画面間の遷移がアニメーション効果で滑らかに繋がってヌルヌル動きます。

MDN の説明は以下のリンク先を参照ください。

基本的な使い方はとてもシンプルで、表示を変更・書換えを行なう処理を、document オブジェクトの startViewTransition メソッドに渡すだけです。こうすると、変更前の表示状態と、変更後の表示状態が、アニメーション効果で滑らかに繋がって遷移します。下記例は同期処理を startViewTransition の引数に渡していますが、Promise を返す非同期関数を渡しても動作します。

document.startViewTransition(() => {
    // ここで表示の変更・画面の書換えを行なう
});

なお、View Transition は、MDN 上の記述を見ると、2023年12月現在では、実験的な機能、とのことです。実際、Google Chrome や Microsoft Edge など、Chromium 系のブラウザでは View Transition がサポートされていますが、Mozilla Firefox や Apple Safari など他のブラウザでは使えないようです (下記リンク先参照)。

Blazor でも View Transition したい!

"Blazor View Transition" とその ViewTransitionRouter を使えば簡単

利用できるブラウザが限定的、且つ実験的機能とはいえ、この View Transition による視覚効果は極めて効果的であるため、Blazor アプリケーションにおいても積極的に使いたくなります。

では Blazor でも View Transition による画面遷移のアニメーション効果を実現するにはどうしたらいいでしょうか。

ひとつの方法としては、拙作の下記 NuGet パッケージを利用する方法があります。

この NuGet パッケージを Blazor アプリケーションプロジェクトに追加したあと、App.razor などに記述されている <Router> コンポーネントの使用を、<ViewTransitionRouter> に書き換えます (下記例)。

App.razor

@* 👇 名前空間を開き... *@
@using Toolbelt.Blazor.ViewTransition 

@* 👇 "Router" を "ViewTransitionRouter" に置換! *@
<ViewTransitionRouter AppAssembly="@typeof(App).Assembly">
    ...
</ViewTransitionRouter>

たったこれだけで、あら不思議、ページ間の移動で View Transition による画面遷移のアニメーション効果が適用されるようになります!

遷移アニメーションのカスタマイズは CSS で

既定の遷移アニメーション効果はフェード効果となっていますが、CSS スタイル定義によってカスタマイズすることが可能です。

例えば以下の CSS スタイル定義をページで読み込んでおくと、

/* 遷移後の表示に適用されるスタイル定義で参照されるアニメーション効果 */
@keyframes slide-from-right {
    from { transform: translateX(100vw); }
}

/* 遷移前の表示に対するスタイル定義
   - 既定でフェードアウトが適用されるので
     それを打ち消すために animation: none を指定する */
::view-transition-old(root) {
    animation: none;
}

/* 遷移後の表示に対するスタイル定義
   - 画面右からスライド員してくるアニメーション効果を適用 */
::view-transition-new(root) {
    animation: 200ms ease-in-out both slide-from-right;
}

以下のように、フェード効果ではなく、スライド効果での遷移アニメーションになります。

view-transition-name CSS 属性でアニメーション対象を制御

さらに、DOM 要素に view-transition-name という CSS 属性で、遷移前後の要素に名前を付けることで、ページ全体ではなく、その指定した要素間で遷移アニメーションを指定することが可能です。

例えば以下のように、Blazor Web アプリケーションのサンプルコンテンツのうち、本体エリアに "body" という View Transition 名を適用し、

Layout/MainLayout.razor

...
<div class="page">
  <div class="sidebar">
    <NavMenu />
  </div>

  <main>
    <div class="...">
      <a href="..." ...>
        About
      </a>
    </div>

    <!-- 👇 "body" という View Transition 名を CSS 属性で指定 -->
    <article class="..." style="view-transition-name:body;">
      @Body
    </article>
  </main>
</div>
...

そして先の遷移間のアニメーション効果定義を、以下のように、View Transition 名 = "body" に対して適用するように書き換えます。

...
/* "root" ではなく、View Transition 名 "body" を指定 */

::view-transition-old(main) {
    animation: none;
}
::view-transition-new(main) {
    animation: 200ms ease-in-out both slide-from-right;
}

そうすると、ページまるごとがスライド効果で遷移アニメーションするのではなく、ナビゲーションやトップバーはそのままに、本文エリアのみがスライド効果での遷移アニメーションとなります。

このように、view-transition-name で遷移前後で対応する要素に同じ名前を付けると、以下の 𝕏 上への投稿のように、画像などの要素単位での連続的なアニメーション効果を実現できます。

The "Blazor View Transion" was rolled out!🎉https://t.co/vZwC7ZnBNj
This package includes a router component and a service both make your Blazor apps have pretty animated transition effects between pages with the View Transitions API!🚀
Live Demo:https://t.co/JQh5hIYE3S #Blazor pic.twitter.com/JnbPSCDJAg

— @jsakamoto (@jsakamoto) October 28, 2023

実際にお手元の Chromium 系ブラウザでライブで試したい場合は、以下のリンク先にライブデモページがあるので、どうぞお試しください。

View Transition をサポートしないブラウザでの動作

冒頭で述べたとおり、2023年12月現在では、Mozilla Firefox や Apple Safari では、View Transition API は提供されていません。このようなブラウザで、ViewTransitionRouter を使った場合ですが、その場合は単純に、ページ遷移間でのアニメーション効果なしで、今までどおり表示が切り替わるのみとなります。

まとめと補足

Web ブラウザの View Transition API はまだ実験的な機能であり、2023年12月現在では Chromium 系のブラウザでしか利用できません。しかし極めて効果的な視覚効果を提供できるため、とても魅力的です。

Blazor アプリケーションにおいては、"Blazor View Transition" NuGet パッケージと、それに収録の ViewTransitionRouter コンポーネントを Blazor 標準の Router コンポーネントの代わりに使うだけで、ページ遷移間に、View Transition API を使った遷移アニメーションが適用されます。未対応のブラウザでは普通にアニメーションなしの遷移で動作します。

遷移のアニメーション効果をカスタマイズするには、CSS スタイル定義で行ないます。とくに、要素に view-transition-name CSS 属性で名前を付けることで、より効果的なアニメーションを実現できます。

なお、今回の投稿では触れませんでしたが、ページ遷移のみならず、開発者が指定したタイミングで View Transition を適用することも可能です。詳しくは Blazor View Transition の GitHub リポジトリの README ドキュメントを参照ください。

Happy Coding! :)