アプリの 2 つのビュー間をアニメーション化する方法について説明します。
リスト表示や詳細ビューの表示、サイドバー ナビゲーションの表示など、アプリケーション内のビュー間でユーザーを移動したいことがよくあります。これらのビュー間をアニメーションで切り替えることで、ユーザーのエンゲージメントを維持し、プロジェクトに躍動感を与えることができます。
- ビュー間を移動するには翻訳を使用します。
left
、top
など、レイアウトをトリガーするプロパティは使用しないでください。 - テンポの良いアニメーションを使用し、継続時間を短くします。
- 画面サイズの拡大に伴ってアニメーションとレイアウトがどのように変化するかを考慮してください。小さい画面で動作したものが、デスクトップで使用すると、奇妙に見えることがあります。
ビュー遷移の外観と動作は、扱うビューの種類によって異なります。たとえば、ビュー上でモーダル オーバーレイをアニメーション化する操作は、リストビューと詳細ビュー間の遷移とは異なるエクスペリエンスが必要です。
翻訳を使用してビュー間を移動します
ここでは、リストビューと詳細ビューの 2 つのビューがあると仮定します。ユーザーがリストビュー内のリストアイテムをタップすると、詳細ビューがスライドインし、リストビューがスライドアウトします。
この効果を実現するには、overflow: hidden
が設定された両方のビューにコンテナが必要です。これにより、2 つのビューの両方をコンテナ内に横方向のスクロールバーを表示せずに横に並べ、必要に応じて各ビューをコンテナ内を左右にスライドさせることができます。
コンテナの CSS は次のとおりです。
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
コンテナの位置は relative
に設定されています。つまり、その内部の各ビューを絶対的に左上隅に配置してから、変換によって移動させることができます。このアプローチは、left
プロパティを使用する場合よりもパフォーマンスに優れており(レイアウトとペイントをトリガーするため)、通常は合理化が簡単です。
.view {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* let the browser know we plan to animate
each view in and out */
will-change: transform;
}
transform
プロパティに transition
を追加すると、優れたスライド効果が得られます。印象が良くなるように、カスタムの cubic-bezier
曲線を使用しています。これについては、カスタム イージングのガイドで説明しています。
.view {
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
画面外にあるビューは右側に移動する必要があるため、この場合は詳細ビューを移動する必要があります。
.details-view {
transform: translateX(100%);
}
クラスを処理するために、少量の JavaScript が必要になります。これにより、ビューの適切なクラスが切り替わります。
var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');
/**
* Toggles the class on the container so that
* we choose the correct view.
*/
function onViewChange(evt) {
container.classList.toggle('view-change');
}
// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', onViewChange, false);
}
// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);
最後に、これらのクラスの CSS 宣言を追加します。
.view-change .list-view {
transform: translateX(-100%);
}
.view-change .details-view {
transform: translateX(0);
}
これを拡張して複数のビューに対応することもできますが、基本的な考え方は変わりません。つまり、非表示のビューはそれぞれオフスクリーンにし、必要に応じてオンにし、現在オンスクリーン ビューを移動する必要があります。
この手法は、ビュー間の遷移だけでなく、サイドバーのナビゲーション要素などの他のスライドイン要素にも適用できます。唯一の違いは、他のビューを移動する必要がないことです。
アニメーションが大画面で動作することを確認する
大画面の場合は、リストビューを削除するのではなく、常に表示したままにして、右側から詳細ビューをスライドします。これは、ナビゲーション ビューの場合とほぼ同じです。