このページは Cloud Translation API によって翻訳されました。

移行の事例紹介を見る

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

対応ブラウザ

ソース

この投稿は、新しい 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 を使用して、視覚的に魅力的にし、このような機能の使用を改善しました。

ビュー遷移を組み込むことで、さまざまな状態のアニメーションを管理する繰り返しの CSS コードと JavaScript コードを排除しました。これにより、開発作業が省略され、ユーザーエクスペリエンスが大幅に向上しました。Aman Soni、Policybazaar テクニカルリード

投資商品リスティングページの「Policybazaar で購入する理由」CTA で遷移アニメーションを表示。

コード

次のコードは、前の例と似ています。注意すべき点は、::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 イベントが予期せずトリガーされるためです。

リソース

View Transition API を使用したスムーズでシンプルな遷移
説明: MPA のビュー遷移
事例紹介: ビュー遷移によるシームレスなナビゲーション
事例紹介: ウェブにできること| アプリのようなナビゲーションを提供する
相互運用性プロポーザル: ブラウザ間でビュー遷移を利用できるようにする
バグの報告と新機能のリクエストのどちらをご希望ですか？SPA と MPA について、ご意見をお聞かせください。

スクロールドリブンのアニメーション、ポップオーバー、コンテナクエリ、has() セレクタなどの新しい CSS と UI の機能を使用して、e コマース企業がどのように利益を得たかについて、このシリーズの他の記事をご確認ください。