Ionik-stilige Bewegung
Verwenden Sie iOS- und Android-Routenanimationen, die nach mobilen Navigationsschemata modelliert sind, ohne Ionic-Komponenten bereitzustellen.
Rückwärts scrollen
Aktivieren Sie eine iOS-Eckgeste, die dem Finger folgt und nur innerhalb von native Capacitor iOS-Apps automatisch aktiviert werden kann.
Framework-unabhängig
Verwenden Sie Web-Komponenten direkt oder Hilfsfunktionen für React, Vue, Angular, Svelte und Solid.
Keine UI-Verkettung
Mit eigener Toolbar, Inhalt, Fußzeile und Router, während die Bibliothek Übergangsschichten koordiniert.
When To Use It
Abschnitt mit dem Titel „When To Use It“@capgo/capacitor-transitions ist für Apps gedacht, die eine Ionic-Qualität bei der Seitenbewegung ohne die Adoption des Ionic-Komponentensystems haben möchten. Es hält die Navigation in Ihrem bestehenden Web-Router und animiert die Seitenbereiche innerhalb der Capacitor WebView.
Benutzen Sie es, wenn Sie benötigen:
- push, pop- und root-Routenübergänge, die sich nah an Plattformkonventionen anfühlen
- koordinierte Header-, Inhalt- und Fußzeilenbewegung
- Seitencaching für schnelle Zurücknavigation
- eine optionale iOS-Rückgabetaste, die dem Finger des Benutzers folgt
- frameworkspezifische Einrichtungshilfen ohne frameworkspezifischen Router
<cap-router-outlet>besitzt die animierte Routenstapel.<cap-page>umfasst jede Seite.<cap-header>,<cap-content>, und<cap-footer>identifiziert die Bereiche, die zusammen bewegt werden sollten.initTransitions(options?)initialisiert 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 Lebenszyklus- und Gestenverhalten an.setupPage(element, callbacks?)registriert Callbacks für den 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" benutzt Capacitor-Laufzeit-Helfer und aktiviert die Edge-Geste nur in nativen iOS-Capacitor-Apps. Verwenden Sie true um es zwingend anzuwenden oder false um es zu deaktivieren.
Die Geste wird in der Web-Schicht implementiert. Sie ist so konzipiert, dass sie sich wie die iOS-Rückwärtsnavigation von Ionic anfühlt, indem sie die Animation fortschreitet, basierend auf der Position des Zeigers, und dann aufgrund von Entfernung und Geschwindigkeit abschließt oder abbricht.
Weitermachen von @capgo/capacitor-Übergänge
Abschnitt mit dem Titel “Weitermachen von @capgo/capacitor-Übergänge”Wenn Sie @capgo/capacitor-Übergänge zur Planung von nativen Medien und Interfaceverhalten verwenden, verbinden Sie es mit Mit @capgo/capacitor-Übergängen für die native Fähigkeit in Mit @capgo/capacitor-Übergängen Mit @capgo/capacitor-Live-Aktivitäten für die native Fähigkeit in Mit @capgo/capacitor-Live-Aktivitäten @capgo/capacitor-Live-Aktivitäten für die Implementierungsdetails in @capgo/capacitor-Live-Aktivitäten, Mit @capgo/capacitor-Video-Player für die native Fähigkeit in Mit @capgo/capacitor-Video-Player, und @capgo/capacitor-Video-Player für die Implementierungsdetails in @capgo/capacitor-Video-Player.