Wie man ein Akkordeon ohne Ruckeln animiert
Warum das Animieren der Höhe teuer ist, die zwei zuverlässigen Techniken, der Umgang mit dem Inhalt und die Barrierefreiheitsregeln, die bleiben müssen.
Kernaussage
Das Animieren der Höhe zwingt den Browser, in jedem Frame das Layout neu zu berechnen, deshalb ruckeln Akkordeons. Die zuverlässige Lösung ist, eine Transformation oder einen beschnittenen Container statt der Höhe zu animieren oder den Inhalt zu messen und auf einen bekannten Pixelwert zu animieren. Halte den Inhalt während der Bewegung lesbar und lass die Animation niemals aria-expanded oder den Tastaturzugang brechen.
Warum das Animieren der Höhe teuer ist
Höhe ist eine Layout-Eigenschaft. Ändert sie sich, berechnet der Browser in jedem Frame die Position von allem darunter neu. Bei einem kleinen Panel ist das meist unproblematisch; in einer langen Seite oder einer Liste von Akkordeons nicht. Transformation und Opazität kann der Compositor übernehmen.
Zwei Techniken, die funktionieren
Die erste misst die Inhaltshöhe in JavaScript und animiert von null auf diesen Pixelwert, dann wird die Höhe wieder auf auto gesetzt. Die zweite hält den Container fest und animiert eine Grid-Zeile von 0fr auf 1fr oder beschneidet eine Transformation. Browser ergänzen animierbare intrinsische Größen, die Unterstützung ist aber nicht universell.
Behandle den Inhalt, nicht nur die Box
Text, der beim Ausblenden gleitet, kann unscharf wirken. Ein kurzes Ausblenden oder ein kleiner Versatz der inneren Zeilen liest sich besser als vertikal bewegte Absätze. Animiere nicht alle Kinder, sondern die ein oder zwei, die die Hierarchie tragen.
Langsam öffnen, schnell schließen
Öffnen zeigt Information, der Nutzer braucht einen Moment, um zu folgen; Schließen ist ein Verwerfen und darf schneller sein. Können mehrere Abschnitte gleichzeitig offen sein, verkürze das Schließen, damit sich die Seite schnell beruhigt.
Barrierefreiheitsregeln, die die Animation nicht brechen darf
Der Kopf sollte ein Button mit aria-expanded sein und das Panel über aria-controls verbunden. Verborgener Inhalt darf per Tastatur und für Screenreader nicht erreichbar sein. Wenn du mit einem Wrapper animierst, prüfe, dass er den Fokus nicht einsperrt und keinen eingeklappten Inhalt ansagt.
Reduzierte Bewegung und lange Listen
Bei reduzierter Bewegung überspringe die Höhenbewegung und zeige das Panel sofort, oder nutze ein sehr kurzes Ausblenden. In langen Listen animiere nur das geänderte Panel und lass den Rest der Seite ohne Bewegung zur Ruhe kommen.
Produktionsnahes Implementierungsbeispiel
/* Grid-row technique: no JavaScript measurement */
.panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 220ms ease;
}
.panel[data-open="true"] {
grid-template-rows: 1fr;
}
.panel > div {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.panel {
transition: none;
}
}Wichtige Prinzipien
- Höhe ist eine Layout-Eigenschaft, ihr Animieren kann Frames kosten
- Messe den Inhalt oder beschneide eine Transformation, statt auto zu animieren
- Blende den Inhalt ein, statt Absätze gleiten zu lassen
- Öffnen darf länger dauern als Schließen
- Halte aria-expanded und den Tastaturzugang durchgehend funktionsfähig
Häufige Fragen
Quellen
- Accordion Pattern — W3C WAI-ARIA Authoring Practices
- Animation performance and frame rate — web.dev
- prefers-reduced-motion — MDN Web Docs