このページは Cloud Translation API によって翻訳されました。

モーダルビューのアニメーション化

モーダルビューは、重要なメッセージを表示するためにユーザーインターフェースをブロックします。アプリ内でモーダルビューをアニメーション化する方法について説明します。

Paul Lewis

モーダルビューは重要なメッセージを表示するためのものです。そのため、ユーザーインターフェースをブロックしたほうがよいでしょう。ユーザーの操作を妨げるだけでなく、使いすぎるとユーザーエクスペリエンスを損なう恐れがあるため、慎重に使用してください。ただし、状況によっては、ビューを使用するのが適切であることもあります。アニメーションを追加すると、生き生きとしたものになります。

モーダルビューは控えめに使用してください。不必要に操作を妨げると、ユーザーが不満を抱きます。
アニメーションにスケールを追加すると、優れた「ドロップオン」効果が得られます。
ユーザーがモーダルビューを閉じたら、すぐに削除する。ただし、ユーザーが驚かないように、モーダルビューは少しゆっくりと画面に表示します。

モーダルオーバーレイはビューポートに合わせる必要があるため、position を fixed に設定します。

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

初期の opacity が 0 であるため非表示になっていますが、クリックやタップが通過するように pointer-events を none に設定する必要があります。そうしないと、すべての操作がブロックされ、ページ全体が応答しなくなります。最後に、opacity と transform をアニメーション化するため、これらを will-change で変更済みとしてマークする必要があります（will-change プロパティの使用もご覧ください）。

ビューが表示されているときは、操作を受け入れ、opacity を 1 にする必要があります。

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

これで、モーダルビューが必要なときはいつでも、JavaScript を使用して「visible」クラスを切り替えることができます。

modal.classList.add('visible');

この時点では、モーダルビューはアニメーションなしで表示されるため、アニメーションを追加できます（カスタムイージングもご覧ください）。

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

変換に scale を追加すると、ビューが画面にわずかに落ちて見えるようになります。これは良い効果です。デフォルトの遷移は、カスタム曲線と 0.1 秒の持続時間を持つ変形プロパティと不透明度プロパティの両方に適用されます。

継続時間はかなり短くなりますが、ユーザーがビューを閉じてアプリに戻ろうとする場合に最適です。欠点は、モーダルビューを表示する場合に比べて、かなり時間を要する可能性があることです。これを修正するには、visible クラスの遷移値をオーバーライドします。

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

モーダルビューが画面に表示されるまでに 0.3 秒かかりました。これはややややこしくありませんが、すぐに閉じられるので、ユーザーも満足できます。