{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "richtungsbewusste-uebergaenge",
 "name": "Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch)",
 "name_en": "Direction-aware transitions / transition types",
 "kurz": "Die Bewegung zeigt, wohin es geht: hinein in ein Thema, zurück zur Übersicht oder seitlich zum nächsten.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "klar",
  "app-artig",
  "strukturiert"
 ],
 "technik": [
  "view-transitions",
  "css",
  "navigation-api",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Jede Navigation bekommt eine Klasse: tiefer (Übersicht zu Detail), höher (Detail zu Übersicht), seitlich (Projekt n zu n+1 oder zurück zu n−1) und zurück (Browser-Zurück). Je Klasse läuft eine eigene, gespiegelte Animation. Vorwärts schiebt nach links oder oben, zurück nach rechts oder unten. Tiefer zoomt hinein, höher zoomt heraus. Nativ übernehmen das View-Transition-Typen, in einem JS-Router ein Richtungsflag.",
  "warum_es_wirkt": "Die Bewegung bildet die Struktur der Seite ab. Man spürt, ob man tiefer geht, zur Übersicht zurückkehrt oder seitlich blättert. Der Zurück-Button fühlt sich wie Zurück an und nicht wie eine neue Seite.",
  "wann_einsetzen": "Immer, wenn ein gerichteter Übergang genutzt wird, etwa Schieben, Wipe, Spalten oder Zoom. Besonders bei Seiten mit klarer Hierarchie aus Übersicht, Detail und Unterseite.",
  "wann_nicht": "Bei Crossfades ohne Richtung nicht nötig. Bei flachen Seiten ohne erkennbare Ebenen bringt es wenig.",
  "varianten": [
   "Hierarchisch: Zoom für tiefer und höher, Schieben für seitlich",
   "Nur vorwärts und zurück, wie Push und Pop in iOS-Apps",
   "Typen fest in CSS: @view-transition { navigation: auto; types: slide, forwards; }",
   "Typen in pagereveal aus navigation.activation ableiten (von- und nach-URL, navigationType)",
   "React: addTransitionType('navigation-forward') mit <ViewTransition default={{...}}>",
   "JS-Router: Ein popstate-Flag kehrt die Richtung um (inside-out.tech)"
  ],
  "umsetzung": "Alle Seiten setzen @view-transition { navigation: auto; }. Die Typen vergibt ein Listener auf der neuen Seite: window.addEventListener('pagereveal', e => { if (!e.viewTransition || !navigation.activation.from) return; const from = new URL(navigation.activation.from.url).pathname; const to = new URL(navigation.activation.entry.url).pathname; e.viewTransition.types.add(depth(to) > depth(from) ? 'deeper' : 'shallower'); if (navigation.activation.navigationType === 'traverse') e.viewTransition.types.add('back'); }). Im CSS bekommt jeder Typ eigene Keyframes, z. B. html:active-view-transition-type(deeper)::view-transition-new(root). Innerhalb einer Seite übergibt man die Typen direkt: document.startViewTransition({ update, types: ['deeper'] }). Fallstricke: Firefox unterstützte Typen in der ersten View-Transition-Implementierung nicht (web.dev). React überspringt Animationen bei popstate, solange der Router nicht die Navigation API nutzt.",
  "mobil": "Entspricht dem gewohnten App-Verhalten (iOS-Push und -Pop) und ist auf dem Telefon besonders wertvoll.",
  "reduzierte_bewegung": "Die Richtung entfällt, es bleibt ein kurzer Fade.",
  "barrierefreiheit": "Keine Nachteile, die Richtung hilft bei der Orientierung. Sie ergänzt Brotkrumen und eindeutige Seitentitel, ersetzt sie aber nicht."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Slide 20–30% Versatz plus Fade für Old/New (typisch)",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.2,
   0.0,
   0.38,
   0.9
  ],
  "css": "cubic-bezier(0.2, 0, 0.38, 0.9)",
  "name": "eigene Kurve",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Chrome for Developers: Cross-document-Typen",
   "url": "https://developer.chrome.com/docs/web-platform/view-transitions/cross-document",
   "auszeichnung": "",
   "beobachtung": "html:active-view-transition-type(forwards/backwards) mit slide-out-to-left/slide-in-from-right und Gegenrichtung. Typen werden in pagereveal gesetzt.",
   "art": "artikel"
  },
  {
   "seite": "Cyd Stumpel: CSS-Day-Demo und Beyond-Tellerrand-Seite",
   "url": "https://conffab.com/presentation/css-tried-to-come-for-my-job-a-practical-guide-to-view-transitions-for-creative-developers/",
   "auszeichnung": "",
   "beobachtung": "Typen overview-to-speaker und speaker-to-overview steuern Dauer, Easing und gestaffelte Karten.",
   "art": "artikel"
  },
  {
   "seite": "inside-out.tech",
   "url": "https://github.com/astrobuildclub/inside-out.tech/pull/3",
   "auszeichnung": "",
   "beobachtung": "Spalten-Übergang kehrt bei Zurück-Navigation die Richtung um.",
   "art": "demo"
  },
  {
   "seite": "nerdy.dev (Adam Argyle)",
   "url": "https://nerdy.dev/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (view-transitions.js): useAutoTypes() vergibt per URLPattern Typen from-home/to-detail/to-page usw.; CSS reagiert mit :root:active-view-transition-type(from-home,to-home) und unterschiedlichen view-transition-class-Animationen je Richtung.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Cross-document view transitions: Types (Chrome for Developers)",
   "url": "https://developer.chrome.com/docs/web-platform/view-transitions/cross-document"
  },
  {
   "titel": "React Labs: View Transitions, Activity, and more",
   "url": "https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more"
  }
 ],
 "kombinierbar_mit": [
  "vt-cross-document-mpa",
  "spalten-shutter-wipe",
  "seite-schiebt-ueber-alte"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/richtungsbewusste-uebergaenge/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Hierarchische Typen statt nur vor/zurück."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Bewegung zeigt, wohin es geht: hinein in ein Thema, zurück zur Übersicht oder seitlich zum nächsten.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "echter_einsatz": "@view-transition { navigation: auto; } in allen Seiten; Typen setzt ein pagereveal-Listener aus navigation.activation",
   "dauer_ms": 400,
   "easing": "cubic-bezier(0.2, 0, 0.38, 0.9) (Rezept-Token tech-präzise)",
   "klassifizierung": "Tiefe = Zahl der Pfadsegmente. Mehr Segmente = tiefer, weniger = hoeher. Gleiche Tiefe: Index in der Liste entscheidet vor oder rueck",
   "typen_hierarchisch": "tiefer, hoeher, vor, rueck; bei Browser-Zurück zusätzlich zurueck (Richtung folgt der Struktur)",
   "typen_vor_zurueck": "vorwaerts (tiefer, nächstes Thema, Browser-Vor), rueckwaerts (höher, vorheriges Thema, jedes Browser-Zurück)",
   "tiefer": "alt scale(1 → 1.06), neu scale(0.94 → 1); transform-origin = Mitte des geklickten Elements auf der alten Seite",
   "hoeher": "alt scale(1 → 0.94), neu scale(1.06 → 1); transform-origin = Mitte der Elternkarte auf der neuen Seite",
   "vor_vorwaerts": "alt translateX(0 → -25%), neu translateX(25% → 0)",
   "rueck_rueckwaerts": "alt translateX(0 → 25%), neu translateX(-25% → 0)",
   "versatz": "25 % (Messwert: typisch 20–30 % plus Fade)",
   "fade": "alt opacity 1 → 0 bis 50 % der Dauer; neu opacity 0 bis 30 %, dann → 1; die Kurve gilt je Keyframe-Abschnitt",
   "ohne_richtung": "Root-Crossfade 400 ms, gleiche Kurve, keine Typen",
   "stehend": "Kopf mit view-transition-name: kopf, ohne Animation",
   "scroll": "tiefer und seitlich beginnen oben; höher und Browser-Zurück stellen die Scroll-Position wieder her",
   "fokus": "nach jedem Klick Fokus auf die neue h1 (tabindex -1), document.title wechselt",
   "fallback": "ohne View Transitions: neue Seite per WAAPI mit denselben Werten einblenden",
   "reduziert": "keine Typen, Root-Crossfade 200 ms linear",
   "hover_karte": "Bild scale 1 → 1.04 in 600 ms cubic-bezier(0.37, 0, 0.63, 1); Kartenschatten 250 ms",
   "ui": "Links und Buttons 150–200 ms cubic-bezier(0.2, 0, 0.38, 0.9)"
  },
  "ausloeser": "klick",
  "touch": "Tippen auf Karte, Blätterknöpfe, Übungen oder Brotkrumen löst denselben Übergang aus. Auf einer Behandlung blättert seitliches Wischen (mindestens 60 px) zum nächsten oder vorherigen Thema, die Animation läuft in Richtung der Geste. Auf schmalen Bildschirmen steht das Bild über dem Text, die Karten werden zu Zeilen, der Kopf zeigt Marke, Telefon-Symbol und Termin. Umschalter mit 34 px hohen Knöpfen, kein Hover-Zoom.",
  "reduziert": "Keine Typen, keine Bewegung: jeder Wechsel überblendet in 200 ms linear. Der Umschalter ist abgeblendet, die Werte-Anzeige nennt das, der Zeiger der Vorführung springt.",
  "korrekturen": {
   "beschreibung": "Jede Navigation bekommt eine Klasse: tiefer (Übersicht zu Detail), höher (Detail zu Übersicht), seitlich (Projekt n zu n+1 oder zurück zu n−1) und zurück (Browser-Zurück). Je Klasse läuft eine eigene, gespiegelte Animation. Vorwärts schiebt nach links oder oben, zurück nach rechts oder unten. Tiefer zoomt hinein, höher zoomt heraus. Nativ übernehmen das View-Transition-Typen, in einem JS-Router ein Richtungsflag.",
   "warum_es_wirkt": "Die Bewegung bildet die Struktur der Seite ab. Man spürt, ob man tiefer geht, zur Übersicht zurückkehrt oder seitlich blättert. Der Zurück-Button fühlt sich wie Zurück an und nicht wie eine neue Seite.",
   "wann_einsetzen": "Immer, wenn ein gerichteter Übergang genutzt wird, etwa Schieben, Wipe, Spalten oder Zoom. Besonders bei Seiten mit klarer Hierarchie aus Übersicht, Detail und Unterseite.",
   "wann_nicht": "Bei Crossfades ohne Richtung nicht nötig. Bei flachen Seiten ohne erkennbare Ebenen bringt es wenig.",
   "varianten": [
    "Hierarchisch: Zoom für tiefer und höher, Schieben für seitlich",
    "Nur vorwärts und zurück, wie Push und Pop in iOS-Apps",
    "Typen fest in CSS: @view-transition { navigation: auto; types: slide, forwards; }",
    "Typen in pagereveal aus navigation.activation ableiten (von- und nach-URL, navigationType)",
    "React: addTransitionType('navigation-forward') mit <ViewTransition default={{...}}>",
    "JS-Router: Ein popstate-Flag kehrt die Richtung um (inside-out.tech)"
   ],
   "umsetzung": "Alle Seiten setzen @view-transition { navigation: auto; }. Die Typen vergibt ein Listener auf der neuen Seite: window.addEventListener('pagereveal', e => { if (!e.viewTransition || !navigation.activation.from) return; const from = new URL(navigation.activation.from.url).pathname; const to = new URL(navigation.activation.entry.url).pathname; e.viewTransition.types.add(depth(to) > depth(from) ? 'deeper' : 'shallower'); if (navigation.activation.navigationType === 'traverse') e.viewTransition.types.add('back'); }). Im CSS bekommt jeder Typ eigene Keyframes, z. B. html:active-view-transition-type(deeper)::view-transition-new(root). Innerhalb einer Seite übergibt man die Typen direkt: document.startViewTransition({ update, types: ['deeper'] }). Fallstricke: Firefox unterstützte Typen in der ersten View-Transition-Implementierung nicht (web.dev). React überspringt Animationen bei popstate, solange der Router nicht die Navigation API nutzt.",
   "mobil": "Entspricht dem gewohnten App-Verhalten (iOS-Push und -Pop) und ist auf dem Telefon besonders wertvoll.",
   "reduzierte_bewegung": "Die Richtung entfällt, es bleibt ein kurzer Fade.",
   "barrierefreiheit": "Keine Nachteile, die Richtung hilft bei der Orientierung. Sie ergänzt Brotkrumen und eindeutige Seitentitel, ersetzt sie aber nicht."
  },
  "geprueft": "01.11.2026",
  "notiz": "Erfundene Physiopraxis Aueblick in Kassel (Rezept praxis-gesundheit-ruhig) mit drei Ebenen: Behandlungen, Behandlung, Übungen, dazu seitliches Blättern. Die Seiten sind als Zustände simuliert, der Wechsel läuft über same-document View Transitions mit denselben Typen und CSS-Regeln wie im MPA. Ein simulierter Browser-Verlauf (Zurück/Vor im Dock, Alt + Pfeiltasten) zeigt den Unterschied der Varianten: In „Hierarchisch“ bestimmt die Struktur die Richtung, in „Vor/Zurück“ schiebt Browser-Zurück immer nach rechts. „Ohne Richtung“ dient als Vergleich. Eine Mini-Sitemap im Dock zeigt Position und letzten Schritt. Eigene SVG-Landschaften statt Fotos. 400 ms mit dem Rezept-Token statt expo.out, weil das Rezept kurze, ruhige Bewegung verlangt. Google Sans Flex ohne ROND-Achse: Die lokale Datei hat nur wght, die volle Datei wäre 1,4 MB. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Brotkrumen-Trenner „/“ per CSS ::before statt Textknoten (dekorativ, Optik gleich); unter 360 px Kopf- und Dock-Lücken 10 px, Dock-Zeile darf umbrechen (320 px ohne Querscrollen); Kontrastmodus-Rahmen für Knöpfe."
 }
}