@capgo/capacitor-Übergänge

Ionisch-stilige Bewegung

Verwenden Sie iOS- und Android-Routenanimationen, die nach mobilen Navigationsschemata modelliert sind, ohne Ionic-Komponenten zu liefern.

Rückwärts

Aktivieren Sie einen iOS-Rand-Gestisch, der dem Finger folgt und nur innerhalb von native Capacitor-iOS nur automatisch aktiviert wird.

Framework-agnostisch

Verwenden Sie Web-Komponenten direkt oder Hilfsprogramme für React, Vue, Angular, Svelte und Solid.

Keine UI-Verriegelung

Bringen Sie Ihre eigene Toolbar, Inhalte, Fußzeile und Router mit, während die Bibliothek Übergangsschichten koordiniert.

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 des Capacitor WebView.

Verwenden Sie es, wenn Sie benötigen:

• push-, pop- und root-Routenübergänge, die sich nahe an Plattformkonventionen anfühlen
• koordinierte Header-, Inhalts- 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

Hinweis

Diese Package renderiert keine native UIKit oder Android Navigation Chrome. Für native Navbars, Tabbars und native Übergangshüllen verwenden Sie @capgo/native-navigation.

Demo

React-Übergangsfußboden

Core API

• <cap-router-outlet> besitzt die animierte Routenstapel.
• <cap-page> umschließt jede Seite.
• <cap-header>, <cap-content>, und <cap-footer> identifizieren Sie die Bereiche, die sich gemeinsam bewegen sollten.
• initTransitions(options?) Initialisiert die Framework-Bindungen.
• setDirection('forward' | 'back' | 'root' | 'none') Erzählt dem nächsten Router-Update, welche Animation ausgeführt werden soll.
• setupRouterOutlet(element, options?) Verbindet eine Steckdose mit Lifecycle- und Gestenverhalten.
• setupPage(element, callbacks?) Registriert Callbacks für das Seitenlebenzyklus.

Plattformmodell

platform="auto" Wählt das iOS- oder Android-Animationprofil aus der Laufzeitumgebung aus. Sie können zwingen platform="ios" oder platform="android" wenn Sie testen.

swipe-gesture="auto" verwendet Capacitor-Runtime-Helfer und aktiviert die Edge-Geste nur in nativen iOS-Capacitor-Apps. Verwenden Sie true oder es zu zwingen. false um es zu deaktivieren.

Die Geste wird im Weblayer implementiert. Sie ist so konzipiert, dass sie sich wie die iOS-Rückwärtsnavigation von Ionic anfühlt, indem die Animation fortschreitet, sobald der Zeiger positioniert ist, und dann basierend auf Entfernung und Geschwindigkeit beendet oder abgebrochen wird.

Weitergehen von @capgo/capacitor-Übergänge

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Übergänge verwenden @capgo/capacitor-Übergänge um native Medien- und Schnittstellenverhalten zu planen und es mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Übergängen zu verbinden Verwenden von @capgo/capacitor-Übergängen für die native Fähigkeit in Verwenden von @capgo/capacitor-Übergängen Verwenden von @capgo/capacitor-Live-Aktivitäten für die native Fähigkeit in Verwenden von @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.