Wie man Tabs und Segmented Controls mit gleitendem Indikator animiert
Leitfaden zur Animation von Tabs mit gleitendem Indikator: Positionsberechnung, Panel-Übergänge, Resize-Unterstützung und ARIA-Barrierefreiheit.
Kernaussage
Ein hochwertiges Segmented Control nutzt einen einzelnen, gemeinsamen Indikator, der per transform: translate und scaleX zwischen den Tab-Schaltflächen gleitet. Das erzeugt optische Kontinuität beim Themenwechsel. Inhaltspanels sollten mit einem sanften Versatz einblenden, und Pfeiltasten ermöglichen die Navigation von Tab zu Tab.
Gemeinsamer Indikator vs. einzelne Rahmen
Statt unter jedem Tab eine eigene Linie ein- und auszublenden, verschieben Sie ein einzelnes Hintergrund-Element zum aktiven Tab. Das menschliche Auge nimmt dies als physisches Objekt wahr, das seinen Platz wechselt.
Berechnung und Physik des gleitenden Indikators
Ermitteln Sie Position und Breite des aktiven Tabs im DOM und animieren Sie translateX und width mit einer Feder. Bei weiten Sprüngen vermittelt ein minimales Dehnen der Breite natürliche Trägheit.
- Animieren Sie den Indikator mit transform statt left/width, wo möglich
- Passen Sie Positionen bei Fenstergrößenänderungen via ResizeObserver an
- Gewährleisten Sie klaren Kontrast zwischen Tab-Text und Indikator
- Vermeiden Sie übertriebenes Nachfedern, das den Text überdeckt
Übergänge der Inhaltspanels
Beim Tabwechsel sollte der neue Inhalt mit einer weichen Überblendung und einem dezenten Versatz von 4 bis 8 px in Leserichtung erscheinen, ohne das Layout ruckartig springen zu lassen.
Richtlinien für Tastaturnavigation
Setzen Sie das WAI-ARIA Tabs-Muster um: role="tablist", role="tab" und role="tabpanel". Nutzer steuern Tabs mit Pfeiltasten an und aktivieren mit Eingabe oder Leertaste.
Produktionsnahes Implementierungsbeispiel
/* Sliding pill container */
.tab-list {
position: relative;
display: flex;
background: #f3f4f6;
padding: 4px;
border-radius: 12px;
}
.sliding-indicator {
position: absolute;
top: 4px;
bottom: 4px;
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
width 200ms cubic-bezier(0.16, 1, 0.3, 1);
}Wichtige Prinzipien
- Nutzen Sie einen gemeinsamen Indikator für physische Kontinuität
- Passen Sie den Indikator per ResizeObserver an Fensteränderungen an
- Ermöglichen Sie Tastatursteuerung mit Pfeiltasten gemäß ARIA-Standard
- Blenden Sie den Indikator bei reduzierter Bewegung ohne Gleiten ein
Häufige Fragen
Quellen
- Tabs Pattern — W3C WAI-ARIA Authoring Practices
- Segmented Buttons — Material Design 3