# Szenen-Übergang (pageTransition)

Mit **Szenen-Übergang** legst du fest, **wie eine Szene erscheint** (In-Transition) und **wie sie verschwindet** (Out-Transition). Die Animation läuft jeweils beim Betreten bzw. Verlassen der Szene auf dem gesamten Szenen-Container. (Hintergrundbild/-farbe, Texte, Buttons usw. animieren damit gemeinsam.)

---

## <video class=" align-left" controls="controls" height="600" src="https://docs.scenario.app/attachments/48?open=true" width="300"></video>

[![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/uHugrafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/uHugrafik.png)

---

## Felder

- **Einblendung (In-Transition)** – Animation beim **Öffnen** der Szene.
- **Ausblendung (Out-Transition)** – Animation beim **Wechsel** zu einer anderen Szene.
- **none** = keine Animation (schnellste Option, Standard).

---

## Verfügbare Optionen

### In-Transitions

- `fadeInScene` – sanft einblenden
- `zoomInScene` – leicht hineinzoomen
- `slideInLeftScene` / `slideInRightScene` – von links/rechts einschieben
- `bounceInScene` – federnde Einblendung
- `rotateInScene` – leicht hereinrotieren
- `magicScaleInScene` – Skalierungs-/Weichzeichner-Effekt
- `iphoneBounceInScene` – iOS-artiger Bounce
- `macSlideInScene` – macOS-artiger Slide
- `materialExpandInScene` – Material-Expand (Card wird groß)
- `androidSlideUpInScene` – Android-Slide von unten
- `rippleInScene` – Wellen-/Ripple-Eintritt
- `cardStackInScene` – Kartenstapel kommt nach vorn
- `materialFlipInScene` – Material-Flip nach vorn

### Out-Transitions

- `fadeOutScene` – sanft ausblenden
- `zoomOutScene` – leicht herauszoomen
- `slideOutLeftScene` / `slideOutRightScene` – nach links/rechts heraus schieben
- `bounceOutScene` – federnde Ausblendung
- `rotateOutScene` – herausrotieren
- `magicScaleOutScene` – Magic-Scale zurück
- `iphoneBounceOutScene` – iOS-artiger Bounce out
- `macSlideOutScene` – macOS-artiger Slide out
- `materialExpandOutScene` – Material-Shrink/Collapse
- `androidSlideDownOutScene` – Android-Slide nach unten
- `rippleOutScene` – Ripple-Ausgang
- `cardStackOutScene` – zurück in Kartenstapel
- `materialFlipOutScene` – Material-Flip nach hinten

---

## Empfohlene Paare (stimmige Kombis)

- **Fade:** `fadeInScene` ⇄ `fadeOutScene` (ruhig, universell)
- **Slide links/rechts:** `slideInLeftScene` ⇄ `slideOutRightScene` *(oder umgekehrt für Gegenrichtung)*
- **Zoom:** `zoomInScene` ⇄ `zoomOutScene`
- **Material/Card:** `materialExpandInScene` ⇄ `materialExpandOutScene` / `cardStackInScene` ⇄ `cardStackOutScene`
- **Platform-Look:**
    
    
    - iOS: `iphoneBounceInScene` ⇄ `iphoneBounceOutScene`
    - Android: `androidSlideUpInScene` ⇄ `androidSlideDownOutScene`
    - macOS: `macSlideInScene` ⇄ `macSlideOutScene`

---

## Hinweise &amp; Best Practices

- **Konsistenz:** Wähle für ein Projekt 1–2 Animationsstile und bleibe dabei.
- **Tempo &amp; Performance:** Dezente Effekte wirken professioneller und laden schneller. Auf älteren Geräten ist `none`/`fade` am flüssigsten.
- **Richtung beachten:** Wenn der Spielfluss „vorwärts“ geht, nutze z. B. **In von rechts → Out nach links** (oder umgekehrt), um eine klare Bewegungslogik zu erzeugen.
- **Barrierefreiheit:** Übertreibe Rotationen/Bounce nicht – sie können empfindliche Nutzer stören.
- **Konflikte vermeiden:** Kombiniere keine starken In/Out-Stile, die gegeneinander arbeiten (z. B. `rotateIn` mit `slideOutRight` kann unruhig wirken).

---

## Kurz-Checkliste

1. **In**- und **Out**-Transition wählen (oder `none`).
2. In der Vorschau prüfen, ob es zum **Ton der Szene** passt.
3. Einheitlich im gesamten Spiel anwenden.
4. Bei Performance-Problemen: auf **fade/none** wechseln.