Ionic-ähnliche Bewegung
Verwenden Sie iOS- und Android-Routenanimationen, die nach mobilen Navigationsschemata modelliert sind, ohne Ionic-Komponenten zu liefern.
@capgo/capacitor-Übergänge
Fügen Sie native Gefühlende Routenübergänge und optionalen iOS-Rückwärts-Swipe zu Capacitor-Apps ohne die Adoption von Ionic-UI hinzu.
Rückwärts-Swipe
Aktivieren Sie einen iOS-Randgestus, der dem Finger folgt und nur innerhalb von nativen Capacitor-iOS automatisch aktiviert wird.
Framework-agnostisch
Verwenden Sie Web-Komponenten direkt oder Hilfsfunktionen für React, Vue, Angular, Svelte und Solid.
Keine UI-Verpflichtung
Bringen Sie Ihre eigene Toolbar, Inhalte, Fußzeile und Router mit, während die Bibliothek Übergangsschichten koordiniert.
Wann es verwenden
Wenn Sie es verwenden sollen@capgo/capacitor-transitions für Apps, die Ionic-Qualität bei der Seitenbewegung ohne die Einführung des Ionic-Komponentensystems haben möchten. Es behält die Navigation in Ihrem bestehenden Web-Router bei und animiert die Seitenelemente innerhalb des Capacitor WebViews.
Verwenden Sie es, wenn Sie benötigen:
- push-, pop- und root-Routenübergänge, die sich nahe an Plattformkonventionen anfühlen
- koordinierte Kopfzeile-, Inhalts- und Fußzeilenbewegung
- Seitencaching für schnelle Zurücknavigation
- eine optionale iOS-Rückgabetaste, die dem Benutzer folgt, wenn er mit dem Finger nach rechts streicht
- frameworkspezifische Setup-Hilfsmittel ohne frameworkspezifischen Router
<cap-router-outlet>besitzt die animierte Routenstapel.<cap-page>umschließt jede Seite.<cap-header>,<cap-content>und<cap-footer>identifiziert die Regionen, die zusammen bewegt werden sollen.initTransitions(options?)initialisiert die Framework-Bindungen.setDirection('forward' | 'back' | 'root' | 'none')teilt dem nächsten Router-Update mit, welche Animation ausgeführt werden soll.setupRouterOutlet(element, options?)schließt eine Steckdose an das Lebenszyklus- und Gestenverhalten an.setupPage(element, callbacks?)registriert Callbacks für das Lebenszyklus der Seite.
Plattformmodell
Abschnitt mit dem Titel „Plattformmodell“platform="auto" wählt das iOS- oder Android-Animationprofil aus der Laufzeitumgebung aus. Sie können es zwingen, platform="ios" oder platform="android" wenn Sie testen.
swipe-gesture="auto" verwendet Capacitor-Laufzeit-Helfer und aktiviert die Edge-Geste nur in nativen iOS-Capacitor-Apps. Verwenden Sie true um es zwingend einzuschalten oder false um es zu deaktivieren.
Die Geste wird in der Web-Schicht implementiert. Sie ist so gestaltet, dass sie sich wie Ionic’s iOS-Swipe-Back-Übergang anfühlt, indem sie die Animation fortschreitet, indem sie die Position des Zeigers steuert, und abschließt oder storniert, basierend auf der Entfernung und Geschwindigkeit.
Fahren Sie mit @capgo/capacitor-Übergängen fort.
Abschnitt mit dem Titel „Weitermachen von @capgo/capacitor-Übergänge“Wenn Sie @capgo/capacitor-Übergänge zum Planen von nativen Medien und Schnittstellenverhalten verwenden, verbinden Sie es mit Mit @capgo/capacitor-Übergänge zum nativen Vermögen in Mit @capgo/capacitor-Übergänge, Mit @capgo/capacitor-Live-Aktivitäten zum nativen Vermögen in Mit @capgo/capacitor-Live-Aktivitäten, @capgo/capacitor-Live-Aktivitäten zum Implementierungsdetail in @capgo/capacitor-Live-Aktivitäten, Mit @capgo/capacitor-Video-Player zum nativen Vermögen in Mit @capgo/capacitor-Video-Player, und @capgo/capacitor-Video-Player für die Implementierungsdetails in @capgo/capacitor-Video-Player.