So animieren Bootstrap-Komponenten: welche Zustandsklassen die Bewegung steuern und wie du sie anpasst oder ganz abschaltest.

In Bootstrap 6 liegt jede Komponenten-Animation vollständig im CSS. JavaScript schaltet nur eine Zustandsklasse um und wartet das Ende des Übergangs ab, bevor es ein Event auslöst oder ein Element entfernt. Du passt die Bewegung also allein per CSS an.

• Feste Zustandsklassen:.show, .active, .hiding und Varianten wie .toast-instant.
• Token-Trio: Eigenschaft, Dauer und Easing je Komponente als CSS-Variablen.
• Größenanimation ohne JS: Collapse und Accordion nutzen interpolate-size.
• Reduzierte Bewegung:prefers-reduced-motion wird automatisch respektiert.
• Promises:show() und hide() liefern Promises, die nach dem Übergang auflösen.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Funktionsweise

Das CSS bestimmt jeden Übergang, JavaScript setzt nur die Zustandsklasse. Damit kannst du die Animation umgestalten, ohne eine Komponente neu zu bauen. Jede animierte Komponente folgt drei Regeln:

1. Der Basis-Selektor enthält den versteckten Zustand und die transition-Deklaration.
2. Eine Zustandsklasse enthält den sichtbaren Zustand.
3. @starting-style liefert den Ausgangszustand beim Einblenden, weil das Element vor dem Setzen der Klasse noch nicht gerendert ist.

Als Referenz dient der Toast. Dort wird display mit allow-discrete animiert, damit der Toast bis zum Ende des Ausblendens im Layout bleibt. Ohne das würde er im ersten Frame verschwinden und du sähest keine Ausblend-Animation.

Zustandsklassen

JavaScript setzt und entfernt nur einen kleinen, festen Satz an Klassen. Gestaltest du diese, folgen deine Anpassungen automatisch der Komponente.

.hiding gibt es für Komponenten, die ihren eigenen Abgang überstehen müssen: Ein Alert wird aus dem DOM entfernt, ein Dialog verlässt den Top-Layer. Komponenten, die nur ausgeblendet werden, entfernen einfach .show.

Bewegung anpassen

Token-Trio

Jede animierte Komponente stellt dieselben drei CSS-Variablen bereit.

Da die Eigenschaftsliste selbst ein Token ist, kannst du etwas Neues animieren, ohne die ganze Deklaration neu zu schreiben. Nimmst du transform in die Liste des Toasts auf, gleitet er beim Einblenden zusätzlich nach oben:

.toast-slide {
  --bs-toast-transition-property: opacity, transform, display;
  --bs-toast-transition-duration: .3s;
  --bs-toast-transition-timing: ease-out;

  transform: translateY(1rem);
}

.toast-slide.show {
  transform: none;
}

Größenanimationen

Collapse und Accordion animieren eine Größe statt der Deckkraft. Dafür setzen sie interpolate-size, damit 0 zum auto des geöffneten Zustands interpoliert werden kann – ohne dass JavaScript den Inhalt vermisst. Browser ohne interpolate-size öffnen und schließen sofort; deshalb beschneidet Collapse die animierte Achse immer. Beim Collapse-Trio steht der Komponentenname am Ende, weil sich beide Komponenten die Variablen teilen.

Gemeinsames Easing

Dialog, Drawer und Menu lesen ihre Easing-Kurve aus einer gemeinsamen Variable auf :root. Eine einzige Überschreibung ändert also alle drei Overlays.

Die zugehörigen Sass-Quellen findest du in der Originaldoku.

Bewegung entfernen

Du hast vier Möglichkeiten, von eng bis global:

1. Die -instant-Klasse der Komponente an einem Element, z. B. .toast-instant.
2. Die Utility .transition-none an einem Element.
3. Ein -duration-Token für eine Komponente oder einen Teilbaum auf 0s setzen.
4. Die Sass-Option $enable-transitions auf false setzen – damit fallen beim Build alle Übergänge weg.

Bootstrap kapselt seine Übergänge in prefers-reduced-motion: no-preference. Wer im System weniger Bewegung wünscht, bekommt also schon sofortige Zustandswechsel. Mehr dazu unter Reduzierte Bewegung.

JavaScript liest vor dem Warten die berechnete Übergangsdauer. Beträgt sie 0s, lösen Events und Promises sofort aus – egal, wodurch die Bewegung entfernt wurde.

Events und Promises

show() und hide() geben Promises zurück, die nach dem Ende des Übergangs auflösen. Die passenden Events shown und hidden feuern im selben Moment.

const toast = new bootstrap.Toast('#myToast')

await toast.show()
// The fade-in has finished.

Ein Element ohne Übergang löst ebenfalls auf, nur eben im nächsten Tick.