Timeline as UX

Detailansicht für Timeline as UX. Die gehoverte Karte trägt die geteilten Namen — Browser matched sie mit den Detail-Gegenstücken. Die Klasse steuert die Animation.

Effekt

Detailansicht für Effekt. Rollenbasierte Klassen halten das CSS trocken — statt pro Element eine Animationsregel zu schreiben, greift eine Regel pro Rolle.

Pure CSS

Detailansicht für Pure CSS. Kein JS — @view-transition{ navigation: auto }, :hover/:focus für Namen, Klassen fürs Styling.

Compositor Path

Detailansicht für Compositor Path. Die Interpolation läuft auf der GPU — Größen- und Positionswechsel bleiben butterweich.

Snapshot Layers

Detailansicht für Snapshot Layers. Alt und Neu koexistieren kurz übereinander, dann übernimmt der neue Zustand.

Same Document

Detailansicht für Same Document. Für SPA-Übergänge nimmt man document.startViewTransition() — hier zeigen wir aber den Cross-Doc-Fall.