移行の事例紹介を見る

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 の投資カテゴリでは、[購入理由] などのヘルプチップ要素に 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 イベントが予期せずトリガーされるためです。

リソース

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