@capgo/capacitor-Übergänge

Ionische Bewegung

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

Rückwärts scrollen

Aktivieren Sie einen iOS-Randgestus, der dem Finger folgt und nur innerhalb von native Capacitor iOS automatisch aktiviert werden kann.

Framework-unabhängig

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

Keine UI-Verriegelung

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

Wann Es Verwenden

@capgo/capacitor-transitions ist für Apps vorgesehen, die eine Ionic-Qualität der Seitenbewegung ohne die Annahme des Ionic-Komponentensystems haben möchten. Es hält die Navigation in Ihrem bestehenden Web-Router und animiert die Seitenelemente 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 Paket renderiert keine native UIKit- oder Android-Navigationchrome. 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> umfasst jede Seite.
• <cap-header>, <cap-content>und <cap-footer> identifizieren Sie die Regionen, die sich gemeinsam bewegen sollen.
• 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 einen Ausgang mit Lebenszyklus- und Gestenverhalten.
• setupPage(element, callbacks?) registriert Callbacks für den Lebenszyklus der Seite.

Plattformmodell

platform="auto" wählt die iOS- oder Android-Animationsprofil aus der Laufzeitumgebung aus. Sie können zwingen platform="ios" oder platform="android" Bei der Überprüfung der Alternativen

swipe-gesture="auto" uses Capacitor runtime helpers and enables the edge gesture only in native iOS Capacitor apps. Use true um es aufzuzwingen oder false um es zu deaktivieren.

Die Geste wird im Weblayer implementiert. Sie ist so konzipiert, dass sie sich wie die iOS-Swipe-Back-Übergang von Ionic anfühlt, indem sie die Animation fortschreiten lässt, basierend auf der Position des Zeigers, und dann abschließt oder storniert, basierend auf der Entfernung und Geschwindigkeit.

Weitergehen von @capgo/capacitor-Übergänge

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Übergänge @capgo/capacitor-transitions Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-Ü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 for the native capability in Using @capgo/capacitor-live-activities, @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.