@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-Wischen

Aktivieren Sie eine iOS-Kante, die 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-Verkettung

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 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ückwärts-Schleuderbewegung, die dem Benutzer 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 das Seitenlebenzyklus.

Plattformmodell

platform="auto" wählt die iOS- oder Android-Animation-Profil aus der Laufzeitumgebung aus. Sie können zwingen platform="ios" oder platform="android" context: HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `alternatives_cta_questions`). Seite/Bereich: Seite zur Vergleichsseite von Capgo Live-Updates. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite alternatives.astro. Bewahren Sie Capgo-Produkt- und -Marken- und Entwicklertrems genau. Nachrichtenschlüssel `alternatives_cta_questions` (Alternativen-CTA-Fragen). | HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `appflow_cta_questions`). Seite/Bereich: Seite zur Appflow-Vergleichs- und -Migration-Marketing-Kopie. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite ionic-appflow.astro. Bewahren Sie Capgo-Produkt- und -Marken- und Entwicklertrems genau. Nachrichtenschlüssel `appflow_cta_questions` (Appflow-CTA-Fragen). | HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `capwesome_cta_questions`). Seite/Bereich: Seite zur Capawesome-Vergleichsseite. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite capwesome.astro. Bewahren Sie Capgo-Produkt- und -Marken- und Entwicklertrems genau. Nachrichtenschlüssel `capwesome_cta_questions` (Capwesome-CTA-Fragen). | Seite/Bereich: Seite zur Appflow-Vergleichs- und -Migration-Marketing-Kopie. Rolle: Kurze UI-Bezeichnung oder Navigationsitem. Gesehen in: Seite ionic-appflow.astro, Seite ionic-enterprise-plugins.astro, Seite solutions/ionic-enterprise-plugins.astro. Nachrichtenschlüssel `appflow_plugins_or` (Appflow-Plugins-oder).

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-Rückwärtsübergangstransition von Ionic anfühlt, indem sie die Animation fortschreitet, indem sie die Position des Zeigers ansteuert, und dann basierend auf Entfernung und Geschwindigkeit abschließt oder storniert.

Weitergehen von @capgo/capacitor-transitions

Wenn Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions Verwenden Sie @capgo/capacitor-transitions für die native Fähigkeit in Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions Verwenden Sie @capgo/capacitor-live-activities für die native Fähigkeit in Verwenden Sie @capgo/capacitor-live-activities für die native Fähigkeit in Verwenden Sie @capgo/capacitor-live-activities für die native Fähigkeit in Verwenden Sie @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.