リストの追加と削除のアニメーション化 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
リスト アニメーションを使って、類似項目のコレクションに対する変更過程を表示することができます。これには追加と削除の両方のアニメーションが含まれます。ここで、"リスト" という用語は、一般的な買い物リスト フォーム以上の概念 (グリッドなど) を含んでいることに注意してください。 これらのアニメーションは、項目が追加されたり削除されたりする過程を、滑らかな視覚的切り替え効果によって、何が起きているかをユーザーにわかりやすく表現します。追加アニメーション中、既に存在する項目は、新しい項目に場所を譲るようにスライドします。そのスペースにフェード インする間、その新しい項目は拡大表示されます。削除アニメーションはその逆の経過をたどります。
このアニメーションは、次の API で構成されています。
- createAddToListAnimation
- createDeleteFromListAnimation
- createAddToSearchListAnimation
- createDeleteFromSearchListAnimation
リストへの追加/リストからの削除アニメーション
リスト アニメーションを使って、項目のコレクション内で同様の項目を挿入したり削除したりすることができます。これらのアニメーションは、ユーザーが検索語句を入力する間に行う検索結果のフィルターに対応するために検索アニメーションの方がいくぶん速いという点で、検索リストへの追加アニメーションと検索リストからの削除アニメーションとは異なります。
次のビデオは、リストに項目を追加したりリストから項目を削除したりするアニメーションのデモです。
検索リストへの追加/検索リストからの削除アニメーション
検索リスト アニメーションは、検索シナリオの一環としてリスト内の項目がすばやく変化する場合に使います。このアニメーションは、リストへの追加アニメーションとリストからの削除アニメーションとはタイミングが異なります。検索リスト アニメーションは継続的にフィルター処理を実施するなどのシナリオでよりすばやく反応します。たとえば、ユーザーが検索対象の単語を入力してリスト内の項目を検索し、そのリストが結果をリアルタイムでフィルター処理している場合、フィルターで除外される項目には検索リストから削除アニメーションを使います。反対に、ユーザーが文字列を検索した後に、BackSpace キーを使って検索対象の単語から 1 文字を削除した場合には、検索結果のリストに再び追加される項目に対して検索リストへの追加アニメーションを使います。
次のビデオは、検索リストに項目を追加したり検索リストから項目を削除したりするアニメーションのデモです。
その他のリソース
フェード アニメーションの API の使い方を示すコード例については、HTML アニメーション ライブラリのサンプルに関するページをご覧ください。
追加や削除のアニメーション使用時のデザインのベスト プラクティスについては、「追加アニメーションと削除アニメーションのガイドラインとチェック リスト」をご覧ください。