ビュー遷移は、ウェブページまたはアプリの UI のさまざまな状態をアニメーションでシームレスに遷移させるものです。View Transition API は、こうした効果を以前よりも簡単かつ効率的に作成できるように設計されています。この API には、以前の JavaScript アプローチにはない次のようなメリットがあります。
- ユーザー エクスペリエンスの向上: スムーズな遷移と視覚的な手がかりにより、UI の変更をユーザーに案内し、ナビゲーションを自然で違和感のないものにします。
- 視覚的な連続性: ビュー間の連続性を維持することで、認知負荷が軽減され、ユーザーがアプリ内で方向感覚を維持しやすくなります。
- パフォーマンス: この API は、メインスレッドのリソースをできるだけ少なく使用して、スムーズなアニメーションを作成しようとします。
- モダンなデザイン: 遷移が改善され、洗練された魅力的なユーザー エクスペリエンスが実現します。
この投稿は、新しい CSS と UI の機能を使用して e コマース企業がウェブサイトを強化した方法について説明するシリーズの一部です。この記事では、View Transition API を実装してメリットを得た企業の例をご紹介します。
redBus
redBus は、ネイティブ エクスペリエンスとウェブ エクスペリエンスの間で可能な限り同等のエクスペリエンスを提供するよう努めてきました。View Transition API が登場する前は、ウェブアセットにこれらのアニメーションを実装するのは困難でした。しかし、この API では、複数のユーザー ジャーニーをまたいで遷移を作成し、ウェブ エクスペリエンスをアプリに近いものにするのが直感的であることがわかっています。パフォーマンスの向上も加味すると、すべてのウェブサイトに必須の機能と言えます。Amit Kumar、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 テクニカルリード
コード
次のコードは、前の例と似ています。注意すべき点は、::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
イベントが予期せずトリガーされるためです。
リソース
- View Transition API を使用したスムーズでシンプルな遷移
- 説明: MPA のビュー遷移
- 事例紹介: ビュー遷移でシームレスなナビゲーションを実現
- 事例紹介: ウェブにできること| アプリのようなナビゲーションを提供する
- 相互運用の提案: ブラウザ間でビュー遷移を利用できるようにする
- バグの報告と新機能のリクエストのどちらをご希望ですか?SPA と MPA について、ご意見をお聞かせください。
スクロール ドリブンのアニメーション、ポップオーバー、コンテナクエリ、has()
セレクタなどの新しい CSS と UI の機能を使用して、e コマース企業がどのようにメリットを得たかについて、このシリーズの他の記事をご確認ください。