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

移行の事例紹介を見る

Swetha Gopalakrishnan

Saurabh Rajpal

ビュー遷移がアニメーションで表示され、異なる状態間のシームレスな遷移 UI の要素です「 Transition API を表示する設計されており、よりシンプルかつ高性能な方法で効果を作成できます。不可能ではありません従来の API と比べて多くのメリットが API に JavaScript によるアプローチの例:

ユーザーエクスペリエンスの向上: スムーズな遷移と視覚的な手がかりによってユーザーをガイドユーザーが違和感なく操作できる自然な操作性です。
視覚的な連続性: ビュー間の継続性の維持認知負荷が軽減され、ユーザーがアプリ内での指示を把握しやすくなります。
パフォーマンス: API は、使用するメインスレッドリソースをできる限り少なくしようとします。滑らかなアニメーションを作成できます。
モダンなデザイン: 移行の改良により、洗練された魅力的なユーザー体験を提供します

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

この投稿 e コマース企業が新しい CSS と UI 機能を使ってウェブサイトを強化しました。この記事では、 View Transition API を実装し、その恩恵を受けています。

redBus

redBus は常に、ネイティブとウェブの間で可能な限り同等のものを作成しようと努めてきました。体験できるようにすることですView Transition API を実装する前に、ウェブアセットでのアニメーション化は困難でした。しかし API によって、複数のユーザージャーニー間の移行を直感的に行えるため、アプリのように体験できます。これらすべてがパフォーマンス上のメリットと相まって、機能が必要です。承認 Kumar、シニアエンジニアリング RedBus のマネージャー

チームは、複数の場所でビュー遷移を実装しました。例ホームのログインアイコンでのフェードインとスライドインのアニメーションの組み合わせできます。

</ph> <ph type="x-smartling-placeholder">

をご覧ください。

ユーザーがログインをクリックしたときに、ビュー遷移がフェードしてスライドインするアイコンをクリックします。

コード

この実装では、複数のカスタムアニメーションを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 Transitions を組み込むことで、CSS と JavaScript の繰り返しを排除さまざまな状態のアニメーションを管理するコードです。これにより、ユーザーエクスペリエンスが大幅に向上しました。Aman Soni 氏、Policybazaar テクニカルリーダー

で確認できます。 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

「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 を使用する際の考慮事項

同じページで複数のビュー遷移効果を使用する場合は、ビュー遷移名が各効果またはセクションごとに異なるため、重複します。

ビュー遷移がアクティブ（遷移中）されている間は、新しいレイヤが最上部に配置されますそのため、カーソルを合わせたときに遷移をトリガーしないようにしてください。 mouseLeave イベントが予期せずトリガーされます（実際のカーソルがまだ動きません）。

リソース

View Transition API によるスムーズでシンプルな遷移
解説: MPA のビュー遷移
事例紹介: ビュー遷移でシームレスなナビゲーションを実現
事例紹介: The Web Can Do!?|アプリのようなナビゲーションを提供する
相互運用の提案: ブラウザ間でビュー遷移を利用できるようにする
バグの報告または新機能のリクエストを行いますか？ご意見をお聞かせください SPA MPA です。

このシリーズの他の記事で e コマースの各社はスクロールドリブンなどの新しい CSS と UI 機能を使用することで、アニメーション、ポップオーバー、コンテナクエリ、has() セレクタです。