Wie man ein Modal öffnen und schließen animiert
Wie man einen Dialog animiert, der mit seinem Auslöser verbunden bleibt: Ursprung, Timing des Hintergrunds, Ein- und Ausgang, Unterbrechung und Fokus.
Kernaussage
Animiere das Modal aus dem Element, das es geöffnet hat, oder aus dem Bereich, den der Nutzer gerade ansah, damit der Wechsel einen räumlichen Ursprung hat. Blende den Hintergrund und bewege das Panel mit unterschiedlichem Timing, mach den Ausgang schneller als den Eingang und halte die Fokusverwaltung aus der Animation heraus. Ein Panel, das aus der Bildschirmmitte wächst, wirkt beliebig.
Beginne beim Auslöser
Räumliche Kontinuität ist der ganze Trick. Öffnet eine Karte einen Detaildialog, kann das Panel aus dieser Karte wachsen; öffnet ein Button in der Leiste die Einstellungen, kann das Panel in seiner Nähe entstehen. So weiß der Nutzer, woher die neue Ebene kommt und wohin sie zurückkehrt.
Bewege Hintergrund und Panel getrennt
Der Hintergrund ist meist eine Opazitätsänderung und günstig zu animieren; das Panel sollte sich bewegen oder skalieren. Beides mit derselben Kurve laufen zu lassen, lässt den ganzen Bildschirm wie ein flaches Bild wirken. Ein leicht verzögerter oder schneller ausblendender Hintergrund liest sich als Tiefe.
- Hintergrund: nur Opazität
- Panel: Transformation und Opazität
- Vermeide Unschärfe-Animation auf großen Flächen, sie ist teuer
- Behalte eine deckende Ersatzfarbe, während der Hintergrund einblendet
Der Ausgang ist schneller als der Eingang
Der Nutzer weiß bereits, was sich schließt, der Ausgang muss ihm also nichts beibringen. Ein kürzerer Ausgang bringt ihn außerdem schneller zur Aufgabe zurück. Ein übliches Muster: ein etwas langsamerer Eingang, der die Form zeigt, dann ein schnelles Ausblenden und Verkleinern beim Schließen.
Mach den Übergang unterbrechbar
Kann ein Modal schnell geöffnet und geschlossen werden, sollte die Animation den aktuellen Zustand lesen statt von null zu starten. Das ist der Unterschied zwischen einem Übergang und einer Zustandsmaschine: Schließt der Nutzer während des Öffnens, kehrt das Panel aus seiner Position um.
Fokus, Escape und reduzierte Bewegung
Animation und Fokus sind getrennte Aufgaben. Setze den Fokus beim Öffnen in den Dialog, halte ihn dort und gib ihn beim Schließen an den Auslöser zurück; das WAI-ARIA-Dialogmuster beschreibt das erwartete Tastaturverhalten. Bei reduzierter Bewegung ersetze die Bewegung durch ein kurzes Ausblenden.
Fehler, die ein Modal billig wirken lassen
Skalierung ab null wirkt wie ein Sprung, nicht wie eine Bewegung. Ein langes Ausblenden lässt die App langsam erscheinen. Die Unschärfe des Hintergrunds auf großen Bildschirmen zu animieren, kann Frames kosten. Und das Scrollen zu sperren, bevor die Animation beginnt, erzeugt einen sichtbaren Sprung: Behebe zuerst diesen Sprung.
Wichtige Prinzipien
- Gib dem Panel einen räumlichen Ursprung, am besten das auslösende Element
- Animiere Hintergrund-Opazität und Panel-Transformation getrennt
- Halte den Ausgang kürzer als den Eingang
- Ein unterbrochenes Öffnen kehrt aus der aktuellen Position um
- Fokusverwaltung ist unabhängig von der Animation und muss weiter funktionieren
Häufige Fragen
Quellen
- Dialog (Modal) Pattern — W3C WAI-ARIA Authoring Practices
- Motion — Apple Human Interface Guidelines
- Animation performance and frame rate — web.dev