移行の事例紹介を見る

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

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

対応ブラウザ

  • Chrome: 111。
  • Edge: 111.
  • Firefox: サポートされていません。
  • Safari: 18。

ソース

この投稿は、新しい 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 テクニカルリード

投資商品リスティング ページの「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 イベントが予期せずトリガーされるためです。

リソース

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