@capgo/capacitor-Übergänge

Ionic-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-Randgeste, die dem Finger folgt und nur innerhalb von nativen Capacitor iOS automatisch aktiviert werden kann.

Framework-agnostisch

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

Keine UI-Verpflichtung

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 der Seitenbewegung ohne die Adoption des Ionic-Komponentensystems wollen. Es hält die Navigation in Ihrem bestehenden Web-Router und animiert die Seitenbereiche innerhalb des Capacitor WebView.

Benutze es, wenn du brauchst:

• push, pop und root Routenübergänge, die sich nah an Plattformkonventionen anfühlen
• koordinierte Kopfzeile, Inhalt und Fußzeile-Bewegung
• Seiteneinblendung für schnelle Zurücknavigation
• eine optionalen iOS-Rückgabetaste, die dem Benutzer folgt
• frameworkspezifische Setup-Hilfsmittel ohne frameworkspezifische Router

Hinweis

Diese Paket renderiert keine native UIKit- oder Android-Navigation chrome. Für native Navbars, Tabbars und native Übergangshüllen, verwende @capgo/native-navigation.

Demo

React-Übergangsfliess

Core API

• <cap-router-outlet> besitzt die animierte Routenstapel.
• <cap-page> umhüllt jede Seite.
• <cap-header>, <cap-content>und <cap-footer> identifiziert die Regionen, die zusammen bewegt werden sollen.
• 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 einen Ausgang an Lebenszyklus- und Gestenverhalten.
• setupPage(element, callbacks?) registriert Seitenlebenszyklus-Callbacks.

Plattformmodell

platform="auto" wählt die iOS- oder Android-Animationsprofil aus der Laufzeitumgebung. Sie können es zwingen 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 zwingend anzuwenden oder false um es zu deaktivieren.

Die Geste wird in der Web-Schicht implementiert. Sie ist so konzipiert, dass sie sich wie Ionic’s iOS-Swipe-Back-Übergang anfühlt, indem sie die Animation fortschreitet, indem sie die Position des Zeigers steuert, dann abschließt oder storniert, basierend auf Entfernung und Geschwindigkeit.

Weitergehen von @capgo/capacitor-Übergängen

Wenn Sie Cloudflare verwenden @capgo/capacitor-Übergänge um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Mit @capgo/capacitor-Übergänge für die native Fähigkeit in Mit @capgo/capacitor-Übergänge, 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.