@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

Ermöglichen Sie eine iOS-Eckgeste, die dem Finger folgt und nur innerhalb von nativen Capacitor iOS automatisch aktiviert werden kann.

Framework-unabhängig

Verwenden Sie Web-Componenten 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 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 wollen. 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 Routenübergänge, die sich nahe an Plattformkonventionen anfühlen
• koordinierte Kopfzeile, Inhalt und Fußzeile-Bewegung
• Seitenspeicherung für schnelle Zurücknavigation
• eine optionalen iOS-Rückgabetaste, die dem Finger des Benutzers folgt
• Framework-spezifische Setup-Helfer ohne Framework-spezifische 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-Umleitungsfluss

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 Bindungen an das Framework.
• 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 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" während des Testens.

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

The gesture is implemented in the web layer. It is designed to feel like Ionic’s iOS swipe-back transition by driving animation progress from the pointer position, then finishing or cancelling based on distance and velocity.

Weitermachen von @capgo/capacitor-Übergänge

Sektion mit dem Titel “Fortsetzen von @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions” @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-Übergänge für die native Fähigkeit in Mit @capgo/capacitor-Live-Übergänge @capgo/capacitor-Live-Übergänge für die Implementierungsdetails in @capgo/capacitor-Live-Übergänge 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