Ionische Bewegung
Verwenden Sie Routenanimationen für iOS und Android, die nach mobilen Navigationselementen 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 wird.
Framework-agnostisch
Verwenden Sie Web-Componenten direkt oder Hilfsfunktionen für React, Vue, Angular, Svelte und Solid.
Keine UI-Abhängigkeit
Bringen Sie Ihre eigene Toolbar, Inhalte, Footer und Router mit, während die Bibliothek Übergangsschichten koordiniert.
Wann Sie es verwenden sollten
Abschnitt mit dem Titel „Wann Sie es verwenden sollten“@capgo/capacitor-transitions für Apps, 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.
Verwenden Sie es, wenn Sie benötigen:
- push-, pop- und root-Routenübergänge, die sich nah an Plattformkonventionen anfühlen
- koordinierte Header-, Inhalts- und Footer-Bewegung
- 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')erzählt dem nächsten Router-Update, 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-Animationsprofil aus der Laufzeitumgebung aus. Sie können es 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 zu aktivieren oder false um es zu deaktivieren.
The Gesten wird in der Web-Schicht implementiert. Es ist so konzipiert, dass es sich wie die iOS-Rückwärts-Swipe-Übergang von Ionic anfühlt, indem die Animationen von der Position des Zeigers gesteuert werden, dann abgeschlossen oder abgebrochen werden, basierend auf der Entfernung und der Geschwindigkeit.
Fortsetzen von @capgo/capacitor-Übergänge
Abschnitt mit dem Titel „Fortsetzen von @capgo/capacitor-Übergänge“Wenn Sie native Medien und Schnittstellenverhalten planen, verbinden Sie es mit @capgo/capacitor-Übergänge um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Verwenden von @capgo/capacitor-Übergänge um die native Fähigkeit in Verwenden von @capgo/capacitor-Übergänge zu verwenden Verwenden von @capgo/capacitor-live-Aktivitäten um die native Fähigkeit in Verwenden von @capgo/capacitor-live-Aktivitäten zu verwenden @capgo/capacitor-live-Aktivitäten um die Implementierungsdetails in @capgo/capacitor-live-Aktivitäten zu verwenden 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.