Zum Inhalt springen
Capgo - Capacitor-Apps bauen, ausliefern und updaten Capgo

@capgo/capacitor-transitions

Füge nativ wirkende Routen-Transitions und optionales iOS-Edge-Swipe-Back zu Capacitor-Apps hinzu, ohne Ionic UI zu übernehmen.
Loslegen GitHub

Motion im Ionic-Stil

Nutze Route-Animationen für iOS und Android, die mobilen Navigationsmustern nachempfunden sind, ohne Ionic-Komponenten auszuliefern.

Zurückwischen

Aktiviert eine iOS-Edge-Geste, die dem Finger folgt und sich nur in nativem Capacitor iOS automatisch aktivieren lässt.

Framework-agnostisch

Nutze Web Components direkt oder Helfer für React, Vue, Angular, Svelte und Solid.

Kein UI-Lock-in

Bring deine eigene Toolbar, deinen eigenen Content, Footer und Router mit, während die Library die Transition-Layer koordiniert.

Wann verwenden

Abschnitt mit dem Titel „Wann verwenden“

@capgo/capacitor-transitions ist für Apps gedacht, die Page-Motion in Ionic-Qualität wollen, ohne das Komponentensystem von Ionic zu übernehmen. Die Navigation bleibt in deinem bestehenden Web-Router, und Page-Elemente werden innerhalb der Capacitor WebView animiert.

Nutze es, wenn du Folgendes benötigst:

  • Push-, Pop- und Root-Route-Transitions, die sich wie native Plattform-Konventionen anfühlen
  • koordinierte Header-, Content- und Footer-Animationen
  • Page-Caching für schnelles Zurücknavigieren
  • eine optionale iOS Edge-Swipe-Back-Geste, die dem Finger des Nutzers folgt
  • Framework-spezifische Setup-Helfer ohne framework-spezifischen Router

Demo

Abschnitt mit dem Titel „Demo“
Animierte React-Demo für Page Transitions mit Vorwärts- und Rückwärtsnavigation in einem Capacitor-ähnlichen Shell-Framework
React-Transition-Flow

Kern von API

Abschnitt mit dem Titel „Core API“
  • <cap-router-outlet> verwaltet den animierten Route-Stack.
  • <cap-page> umschließt jede Seite.
  • <cap-header>, <cap-content>, und <cap-footer> identifiziere die Bereiche, die sich gemeinsam bewegen sollen.
  • initTransitions(options?) initialisiert die Framework-Bindings.
  • setDirection('forward' | 'back' | 'root' | 'none') teilt dem nächsten Router-Update mit, welche Animation ausgeführt werden soll.
  • setupRouterOutlet(element, options?) verbindet ein Outlet mit Lifecycle- und Gestenverhalten.
  • setupPage(element, callbacks?) registriert Page-Lifecycle-Callbacks.

Plattformmodell

Abschnitt mit dem Titel „Plattformmodell“

platform="auto" wählt das iOS- oder Android-Animationsprofil aus der Runtime-Umgebung aus. Du kannst erzwingen platform="ios" oder platform="android" beim Testen.

swipe-gesture="auto" verwendet Capacitor Runtime-Helper und aktiviert die Edge-Geste nur in nativen iOS Capacitor Apps. Nutze true um sie zu erzwingen oder false um sie zu deaktivieren.

Die Geste ist im Web-Layer implementiert. Sie ist so konzipiert, dass sie sich wie Ionics iOS-Swipe-Back-Transition anfühlt: Der Animationsfortschritt wird von der Pointer-Position gesteuert, und die Animation wird je nach Distanz und Geschwindigkeit abgeschlossen oder abgebrochen.

Weiterlesen mit @capgo/capacitor-transitions

Abschnitt mit dem Titel „Weiterlesen mit @capgo/capacitor-transitions“

Wenn du es nutzt @capgo/capacitor-transitions , um natives Media- und Interface-Verhalten zu planen, verbinde es mit Verwendung von @capgo/capacitor-transitions für die native Funktion in „Verwendung von @capgo/capacitor-transitions“, @capgo/capacitor-live-activities verwenden für die native Funktion in „@capgo/capacitor-live-activities verwenden“, @capgo/capacitor-live-activities für die Implementierungsdetails in @capgo/capacitor-live-activities, Verwendung von @capgo/capacitor-video-player für die native Funktion in „@capgo/capacitor-video-player verwenden“, und @capgo/capacitor-video-player für das Implementierungsdetail in @capgo/capacitor-video-player.