Seitenübergänge

Sanfte Wechsel zwischen Doku-Seiten und gemeinsame Elemente, die von einer Karte in die Detailansicht gleiten. Alles läuft über die View-Transition-API des Browsers, mit sofortigem Fallback und Fokus im neuen main.

Zurück zur Startseite

Presets

Jeder Link navigiert wirklich. Die Doku-Schale nutzt fade; slide kehrt bei direction=back die Richtung um.

Fade

Weicher Crossfade – die ruhige Wahl für Dokumentations- und Einstellungsseiten.

Karte ansehen

Slide

Seitlicher Schub. Zurück-Navigationen laufen automatisch in Gegenrichtung.

Button ansehen

Scale

Leichtes Zoomen – passend, wenn eine Karte zu einer Detailansicht wird.

Badge ansehen

Shared Element

Karte und Detail tragen denselben view-transition-name. Der Browser morpht Position und Größe, ohne dass sich der Inhalt doppelt.

Station 3B

Dienstplan

8 Schichten, 3 Personen, eine offene Übergabe.

Der Name ist nur einmal sichtbar – deshalb bleibt die zweite Karte bewusst ohne Shared Element.

Fokus und Fallback

Nach jedem animierten Wechsel liegt der Fokus im neuen main. Ohne View-Transition-API oder bei reduzierter Bewegung navigiert der Link sofort, ohne Fehler.

Fokusziel ist standardmäßig main; pro Navigation lässt es sich über focusTarget ändern.
Modifizierte Klicks, neue Tabs und externe Links bleiben beim Browser.
Die Attribute data-fui-vt und data-fui-vt-direction dokumentieren den letzten Wechsel.