Share via


コンテンツと開始切り替えのアニメーション化 (HTML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

コンテンツ切り替えアニメーションを使うと、コンテナーや背景はそのままに、画面のある領域のコンテンツを変更できます。新しいコンテンツが、指定されたオフセット位置から画面にフェード インします。既にあるコンテンツを差し替える場合、そのコンテンツは、新しいコンテンツが読み込まれると共にフェード アウトします。これは分割画面 (一覧ビューと詳細ビューを表示) のナビゲーション時に使われることがあります。また、コンテンツ切り替えアニメーションを使うと、アプリでページを切り替えるときに、ページの残り部分の後に読み込まれるコンテンツが表示されます。

このアニメーションは、次の関数で構成されます。

次のビデオは、既にあるコンテンツを消した後、新しいコンテンツを表示するアニメーションのデモです。

元のコンテンツと差し替え後のコンテンツが、同じレイアウトや同じサイズになっている必要はありません。

コンテンツ切り替えのための API を使うには、次の点を把握しておく必要があります。

  • 差し替え前のオブジェクト
  • 差し替え後のオブジェクト
  • 差し替え後の新しいコンテンツが移動する距離と方向

その他のリソース

コンテンツ切り替えアニメーションの関数の使い方を示すコード例については、HTML アニメーション ライブラリのサンプルに関するページをご覧ください。

コンテンツ切り替えアニメーションの使用時のデザインのベスト プラクティスについては、「コンテンツ切り替えアニメーションのガイドラインとチェック リスト」をご覧ください。

関連トピック

UI のアニメーション化

ページ切り替えのアニメーション化

enterContent

exitContent