移行の事例紹介を見る

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

ビュー遷移は、ウェブページやアプリの UI のさまざまな状態間をアニメーションでシームレスに遷移するものです。View Transition API は、これまでよりも簡単かつパフォーマンスの高い方法でこれらのエフェクトを作成できるように設計されています。この API には、以前の JavaScript アプローチと比較して次のようなメリットがあります。

  • ユーザー エクスペリエンスの向上: スムーズなトランジションと視覚的なキューにより、UI の変化をユーザーに伝え、ナビゲーションを自然で違和感のないものにします。
  • 視覚的な連続性: ビュー間の連続性を維持すると、認知負荷が軽減され、ユーザーはアプリケーション内で方向感覚を維持できます。
  • パフォーマンス: API は、メインスレッドのリソースをできるだけ少なく使用して、よりスムーズなアニメーションを作成しようとします。
  • モダンなデザイン: 改善されたトランジションにより、洗練された魅力的なユーザー エクスペリエンスが実現します。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

この投稿は、新しい CSS と UI の機能を使用して e コマース企業がウェブサイトを強化した方法について説明するシリーズの一部です。この記事では、View Transition API を実装してメリットを得た企業の例をご紹介します。

redBus

redBus は、ネイティブ エクスペリエンスとウェブ エクスペリエンスの間にできるだけ同等性を確保しようと常に努めてきました。View Transition API の前は、ウェブ アセットにこれらのアニメーションを実装するのは困難でした。しかし、この API を使用すると、複数のユーザー ジャーニーにわたるトランジションを直感的に作成して、ウェブ エクスペリエンスをアプリのようなものにすることができます。パフォーマンス上のメリットと合わせて、すべてのウェブサイトで必須の機能となっています。」—Amit Kumar 氏、redBus シニア エンジニアリング マネージャー。

チームは複数の場所でビューの切り替えを実装しました。ホームページのログイン アイコンにフェードインとスライドインのアニメーションを組み合わせた例を次に示します。

ユーザーが redBus のホームページでログイン アイコンをクリックしたときに、ビューのトランジションをフェードインとスライドインで表示します。

コード

この実装では、複数の view-transition-name とカスタム アニメーション（scale-down と scale-up）を使用します。一意の値を持つ view-transition-name を使用すると、ログイン コンポーネントがページの残りの部分から分離され、個別にアニメーション化されます。新しい一意の view-transition-name を作成すると、疑似要素ツリーに新しい ::view-transition-group も作成されます（次のコードを参照）。これにより、デフォルトの ::view-transition-group(root) とは別に操作できるようになります。

::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)   
└─…

//Code for VT for login
  if (!document.startViewTransition) {
   this.setState(
     {
       closeSigninModal: condition ? true : false
     },
     () => {
       if (closeSigninCb) {
         closeSigninCb();
       }
     }
   );
 } else {
   const transition = document.startViewTransition();
   transition.ready.finally(() => {
     setTimeout(() => {
       this.setState(
         {
           closeSigninModal: condition ? true : false
         },
         () => {
           if (closeSigninCb) {
             closeSigninCb();
           }
         }
       );
     }, 500);
   });
 }

.signin_open {
 view-transition-name: signin;
}

.signin_close  {
 view-transition-name: signinclose;
}

::view-transition-group(signin),
::view-transition-group(signinclose) {
 animation-duration: 0.5s;
}

::view-transition-old(signin) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
 animation-name: -ua-view-transition-fade-in, scale-up;
}

::view-transition-new(signinclose) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}

@keyframes scale-down {
 to {
     scale: 0;
 }
}

@keyframes scale-up {
 from {
     scale: 0;
 }
}

Tokopedia

チームは、ユーザーが商品のサムネイルを切り替えるときにフェード アニメーションを追加するために、ビューの切り替えを使用しました。

実装は非常に簡単です。startViewTransition を使用することで、以前の実装（効果なし）と比較して、より快適なフェード トランジションをすぐに実現できます。Andy Wihalim、Tokopedia シニア ソフトウェア エンジニア。

変更前

変更後

コード

次のコードでは、React フレームワークを使用し、flushSync. などのフレームワーク固有のコードが含まれています。フレームワークを使用してビューの切り替えを実装するをご覧ください。これは、ブラウザが startViewTransition をサポートしているかどうかを確認し、サポートしている場合はトランジションを行う基本的な実装です。それ以外の場合は、デフォルトの動作に戻ります。

const handleClick =
  ({ url, index }) =>
  () => {
    if ('startViewTransition' in document) { //check if browser supports VT
      document.startViewTransition(() => {
        flushSync(() => {
          setDisplayImage({ url, index });
          setActiveImageIndex(index);
        });
      });
    } else { //if VT is not supported, fall back to default behavior
      setDisplayImage({ url, index });
      setActiveImageIndex(index);
    }
  };

...

<Thumbnail onClick={handleClick({url, index})} />

Policybazaar

Policybazaar の投資部門は、「購入する理由」などのヘルプチップ要素に View Transition API を使用し、視覚的に魅力的なものにして、このような機能の使用を改善しました。

View Transitions を組み込むことで、さまざまな状態のアニメーションを管理する CSS と JavaScript の繰り返しコードを排除しました。これにより、開発の労力が軽減され、ユーザー エクスペリエンスが大幅に向上しました。」—Aman Soni 氏、Policybazaar テクニカル リード

投資リスティング ページの [Why buy from Policybazaar]（Policybazaar から購入する理由）の行動を促すフレーズで、トランジション アニメーションを表示します。

コード

次のコードは、前の例と似ています。::view-transition-old(root) と ::view-transition-new(root) のデフォルトのスタイルとアニメーションをオーバーライドできる点に注意してください。この場合、デフォルトの animation-duration が 0.4 秒に更新されました。

togglePBAdvantagePopup(state: boolean) {
  this.showPBAdvantagePopup = state;

  if(!document.startViewTransition) {
    changeState();
    return;
  }

  document.startViewTransition(() => {changeState();});

  function changeState() {
    document.querySelector('.block_section').classList.toggle('hide');
    document.querySelector('.righttoggle_box').classList.toggle('show');
  }
}

.righttoggle_box{
  view-transition-name: advantage-transition;
}

.block_section{
  view-transition-name: advantage-transition;
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.4s;
}

View Transition API を使用する際の考慮事項

同じページで複数のビュー遷移効果を使用する場合は、競合を避けるため、効果またはセクションごとに異なる view-transition-name を指定してください。

ビュー トランジションがアクティブな間（トランジション中）、UI の残りの部分の上に新しいレイヤが追加されます。そのため、ホバーでトランジションをトリガーすることは避けてください。mouseLeave イベントが予期せずトリガーされる（実際のカーソルはまだ動いていない）ためです。

リソース

このシリーズの他の記事では、e コマース企業がスクロール駆動アニメーション、ポップオーバー、コンテナ クエリ、has() セレクタなどの新しい CSS 機能と UI 機能を使用して、どのようなメリットを得たかについて説明しています。