Modale Ansichten animieren

Modale Ansichten blockieren die Benutzeroberfläche, um wichtige Nachrichten anzuzeigen. Informationen zum Animieren modaler Ansichten in Ihren Apps

Modale Ansichten sind für wichtige Nachrichten gedacht, bei denen Sie sehr gute Gründe haben, die Benutzeroberfläche zu blockieren. Verwenden Sie sie mit Bedacht, da sie störend sind und die Nutzererfahrung bei übermäßigem Einsatz leicht beeinträchtigen können. In einigen Fällen sind sie jedoch die richtigen Ansichten und mit einer Animation werden sie lebendig.

• Verwenden Sie modale Ansichten sparsam. Nutzer sind frustriert, wenn sie unnötig unterbrochen werden.
• Wenn Sie der Animation einen Maßstab hinzufügen, entsteht ein schöner „Drop-on“-Effekt.
• Die modale Ansicht schnell schließen, wenn der Nutzer sie schließt. Zeigen Sie die modale Ansicht jedoch etwas langsamer an, damit der Nutzer nicht überrascht wird.

Das modale Overlay sollte am Darstellungsbereich ausgerichtet sein. Setzen Sie daher position auf fixed:

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

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

Der Wert für opacity ist anfangs 0, daher wird er nicht angezeigt, aber auch pointer-events muss auf none gesetzt sein, damit Klicks und Berührungen weitergeleitet werden. Andernfalls werden alle Interaktionen blockiert, sodass die gesamte Seite nicht mehr reagiert. Da opacity und transform animiert werden, müssen sie mit will-change als sich ändernd gekennzeichnet werden (siehe auch Eigenschaft „will-change“ verwenden).

Wenn die Ansicht sichtbar ist, muss sie Interaktionen zulassen und eine opacity von 1 haben:

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

Wenn die modale Ansicht jetzt erforderlich ist, können Sie die Klasse „visible“ mit JavaScript aktivieren oder deaktivieren:

modal.classList.add('visible');

Die modale Ansicht wird jetzt ohne Animation angezeigt, die Sie jetzt hinzufügen können (siehe auch Benutzerdefiniertes Easing):

.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);
}

Wenn Sie der Transformation scale hinzufügen, wirkt es so, als würde die Ansicht leicht auf dem Bildschirm abfallen. Das ist ein schöner Effekt. Der Standardübergang gilt sowohl für die Transformations- als auch für die Deckkrafteigenschaften mit einer benutzerdefinierten Kurve und einer Dauer von 0,1 Sekunden.

Die Dauer ist jedoch recht kurz, was ideal ist, wenn der Nutzer die Ansicht schließt und wieder zu Ihrer App zurückkehren möchte. Der Nachteil ist, dass es wahrscheinlich zu aggressiv ist, wenn die modale Ansicht angezeigt wird. Um dieses Problem zu beheben, überschreiben Sie die Übergangswerte für die Klasse 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);
}

Jetzt dauert es 0,3 Sekunden, bis die modale Ansicht auf dem Bildschirm erscheint. Das ist etwas weniger aufdringlich, aber sie wird schnell geschlossen, was die Nutzer zu schätzen wissen.