ビュー遷移は、ウェブページまたはアプリの UI のさまざまな状態間でのアニメーションでシームレスに遷移します。View Transition API は、こうした効果を以前よりも簡単かつ効率的に作成できるように設計されています。この API には、従来の JavaScript アプローチよりも多くのメリットがあります。
- ユーザー エクスペリエンスの向上: スムーズな遷移と視覚的な合図によって、ユーザーが UI の変更をスムーズに行えるようになったため、ナビゲーションが自然でわずらわしくありません。
- 視覚的な連続性: ビュー間の連続性を保つことで、認知負荷が軽減され、ユーザーがアプリ内での指示を把握しやすくなります。
- パフォーマンス: API は、使用するメインスレッド リソースをできるだけ少なくして、アニメーションをより滑らかにしようとします。
- モダンなデザイン: 画面遷移の改善により、洗練された魅力的なユーザー エクスペリエンスが実現します。
この投稿は、e コマース企業が新しい CSS と UI 機能を使用してウェブサイトをどのように強化したかを説明するシリーズの一部です。この記事では、一部の企業が View Transition API を実装し、その恩恵を受けています。
redBus
redBus は常に、ネイティブ エクスペリエンスとウェブ エクスペリエンスを可能な限り同等のものにしようと努めてきました。View Transition 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を使用することで、以前の実装（Tokopedia、シニア ソフトウェア エンジニア Andy Wihalim 氏）より、効果のないスムーズなフェード移行をすぐに実現できます。
適用前
適用後
コード
次のコードは 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 を使用して視覚的に訴求力のある要素を提供し、そのような機能の使用を改善しています。
View Transitions を組み込むことで、さまざまな状態にわたってアニメーションを管理するために生じる、CSS や JavaScript の繰り返しコードを排除しました。これにより、開発作業が削減され、ユーザー エクスペリエンスが大幅に向上しました。—Policybazaar テクニカル リーダー、Aman Soni 氏
コード
次のコードは前の例に似ています。注目すべき点は、::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 Transition API を使用する際の考慮事項
同じページで複数のビュー遷移効果を使用する場合は、競合を防ぐために、効果またはセクションごとに異なるビュー遷移名を使用してください。
ビュー遷移がアクティブ（遷移）間は、UI の他の部分の上に新しいレイヤが追加されます。そのため、実際のカーソルがまだ移動していない場合に、mouseLeave イベントが予期せずトリガーされるため、カーソルを合わせて遷移をトリガーしないようにしてください。
リソース
- View Transition API によるスムーズでシンプルな遷移
- 解説: MPA のビュー遷移
- 事例紹介: ビュー遷移でシームレスなナビゲーションを実現
- 事例紹介: The Web Can Do!?| アプリのようなナビゲーションを提供する
- 相互運用の提案: ブラウザ間でビュー遷移を利用できるようにする
- バグの報告または新機能のリクエストを行いますか？SPA と MPA についてのご意見をお寄せください。
このシリーズの他の記事では、スクロールドリブン アニメーション、ポップオーバー、コンテナクエリ、has() セレクタなどの CSS と UI の新機能を使用することで、e コマース企業がどのようなメリットを得ているかについて説明しています。