Wie man einen Dark-Mode-Übergang flüssig animiert
Erfahren Sie, wie Sie den Wechsel zum Dunkelmodus animieren: Vermeidung von transition: all, kreisförmige View Transitions API und Schutz vor Aufblitzen.
Kernaussage
Den Dunkelmodus zu animieren erfordert eine Balance aus Sanftheit und Performance. Vermeiden Sie transition: all * in CSS, da dies auf jedem Element Neuberechnungen erzwingt und zu schweren Rucklern führt. Setzen Sie stattdessen auf die View Transitions API für eine kreisförmige Welle ab dem Umschalt-Button oder beschränken Sie Farbüberblendungen auf 200 bis 300 ms.
Die Falle von transition: all über das gesamte DOM
Ein pauschales transition: all 0.3s auf allen Elementen (*) zwingt den Browser, Größen, Schatten, Rahmen und Schriften tausender Knoten gleichzeitig neu zu berechnen. Bei komplexen Seiten bricht die Bildrate ein. Animieren Sie nur Farb-CSS-Variablen auf dem Root-Element.
Die kreisförmige Enthüllung mit der View Transitions API
Moderne Browser unterstützen document.startViewTransition(). Damit lässt sich eine animierte kreisförmige Maske mit clip-path erzeugen, die sich vom Schalter aus über den Bildschirm ausbreitet und das neue Theme wie eine Welle sichtbar macht.
- Animieren Sie keine Eigenschaften, die das Layout neu berechnen
- Nutzen Sie document.startViewTransition() mit kreisförmigem clip-path
- Speichern Sie den Status in localStorage und setzen Sie die Klasse vor dem Rendern
- Halten Sie die Dauer bei 250 bis 350 ms, um Nutzer nicht aufzuhalten
Schutz vor weißem Aufblitzen (FOUC)
Wird der Dunkelmodus vom System oder localStorage vorgegeben, binden Sie ein kleines synchrones Script im <head> ein, das die Theme-Klasse vor dem Rendern des <body> setzt, um weiße Blitze zu verhindern.
Barrierefreiheit und Lichtempfindlichkeit
Plötzliche Helligkeitswechsel können lichtempfindliche Nutzer belasten. Unter prefers-reduced-motion schalten Sie das Farbschema ohne Wellenanimation und ohne verzögerte Überblendung sofort um.
Produktionsnahes Implementierungsbeispiel
/* View Transitions API circular reveal */
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-new(root) {
animation: reveal-theme 400ms ease-out;
}
@keyframes reveal-theme {
from { clip-path: circle(0% at var(--click-x) var(--click-y)); }
to { clip-path: circle(150% at var(--click-x) var(--click-y)); }
}Wichtige Prinzipien
- Setzen Sie niemals transition: all global auf alle DOM-Elemente
- Nutzen Sie die View Transitions API für elegante kreisförmige Effekte
- Setzen Sie die Theme-Klasse im Head, um weißes Aufblitzen zu verhindern
- Schalten Sie Farben bei reduzierter Bewegung augenblicklich um
Häufige Fragen
Quellen
- View Transitions API — W3C
- Smooth theme transitions with View Transitions — Chrome Developers