ビュー遷移は、ウェブページまたはアプリの UI のさまざまな状態間のアニメーション化されたシームレスな遷移です。View Transitions API は、こうした効果をこれまでよりも簡単かつ効率的に作成できるように設計されています。この API には、以前の JavaScript アプローチに比べて次のような複数のメリットがあります。
- ユーザー エクスペリエンスの向上: スムーズな遷移と視覚的な合図で UI の変更をユーザーにガイドし、自然で不快なナビゲーションを回避します。
- 視覚的な連続性: ビュー間で連続性を維持することで、認知負荷が軽減され、ユーザーはアプリケーション内で方向性を維持できます。
- パフォーマンス: API は、使用するメインスレッド リソースをできるだけ少なくし、スムーズなアニメーションを作成します。
- 最新のデザイン: トランジションが改善されたことで、洗練された魅力的なユーザー エクスペリエンスが実現します。
この投稿は、e コマース企業が新しい CSS と UI 機能を使用してウェブサイトをどのように強化したかを説明するシリーズの一部です。この記事では、View Transitions API を実装し、活用した企業の事例をご紹介します。
redBus
redBus は常に、ネイティブ エクスペリエンスとウェブ エクスペリエンスの同等性を可能な限り高めるよう努めてきました。View Transitions API を使用する前は、これらのアニメーションをウェブアセットに実装することは困難でした。API を使用すれば、複数のユーザー ジャーニーにわたって遷移を作成し、ウェブ エクスペリエンスをよりアプリに近いものにすることができます。これらすべてと、パフォーマンス上のメリットに加え、すべてのウェブサイトで欠かせない機能となっています（redBus、シニア エンジニアリング マネージャー、Amit Kumar 氏）。
チームは、複数の場所にビュー遷移を実装しています。ホームページのログインアイコンでのフェードインとスライドインのアニメーションの組み合わせの例を次に示します。
コード
この実装では、複数の 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 API を使用して、視覚的にアピールし、このような機能の使用を改善してきました。
ビュー遷移を組み込むことで、さまざまな状態間でアニメーションを管理する繰り返しの CSS や JavaScript のコードが不要になりました。これにより、開発の労力が節約され、ユーザー エクスペリエンスが大幅に向上しました。Aman Soni 氏、Policybazaar テクニカル リーダー
コード
次のコードは、前の例に似ています。注目すべき点は、::view-transition-old(root) と ::view-transition-new(root) のデフォルトのスタイルとアニメーションをオーバーライドできることです。この例では、デフォルトの animation-duration が 0.4s に更新されています。
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 Transitions API を使用する際の考慮事項
同じページで複数のビュー遷移効果を使用する場合は、競合を防ぐためにエフェクトまたはセクションごとに異なるビュー遷移名を使用します。
ビュー遷移がアクティブ（遷移）の間は、UI の残りの上に新しいレイヤが追加されます。そのため、カーソルを合わせたときに遷移をトリガーしないようにしてください。mouseLeave イベントは、実際のカーソルがまだ動いていないときに予期せずトリガーされるためです。
リソース
- View Transitions API によるスムーズでシンプルな遷移
- 説明: MPA のビュー遷移
- 事例紹介: ビュー遷移でシームレスなナビゲーションを実現
- 事例紹介: The Web Can Do What!?| アプリのようなナビゲーションを提供する
- 相互運用の提案: 複数のブラウザでビュー遷移を使用できるようにする
- バグの報告または新機能のリクエストを行いますか？SPA と MPA についてご意見をお聞かせください。
スクロールドリブン アニメーション、ポップオーバー、コンテナクエリ、has() セレクタなどの新しい CSS と UI の機能を使用して、e コマース企業がどのようにメリットを得るかについて説明しているこのシリーズの他の記事もご覧ください。