ionische Bewegung
Verwenden Sie iOS- und Android-Routenanimationen, die nach mobilen Navigationsschemata modelliert sind, ohne Ionic-Komponenten bereitzustellen.
Rückwärts-Wipe
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-Komponenten direkt oder Hilfsfunktionen für React, Vue, Angular, Svelte und Solid.
Keine UI-Verkettung
Bringen Sie Ihre eigene Toolbar, Inhalte, Fußzeile und Router mit, während die Bibliothek die Übergangsschichten koordiniert.
Wann Es Verwenden
Abschnitt mit dem Titel „Wann Es Verwenden“@capgo/capacitor-transitions Dies 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 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
<cap-router-outlet>besitzt die animierte Routenstapel.<cap-page>besitzt die animierte Routenstapel.<cap-header>,<cap-content>und<cap-footer>identifizieren Sie die Regionen, die sich gemeinsam bewegen sollen.initTransitions(options?)initialisiert die Bindungen des Frameworks.setDirection('forward' | 'back' | 'root' | 'none')teilt dem nächsten Router-Update mit, welche Animation ausgeführt werden soll.setupRouterOutlet(element, options?)schließt einen Ausgang an das Lebenszyklus- und Gestenverhalten.setupPage(element, callbacks?)registriert Callbacks für das Seitenlebenszyklus.
Plattformmodell
Abschnitt mit dem Titel ‘Plattformmodell’platform="auto" wählt die iOS- oder Android-Animationsprofil 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 Vergleichs- und Migration von Capflow. Rolle: Langes Marketing- oder Rechtsparagraph. Gesehen in: Seite ionic-appflow.astro. Bewahren Sie Capgo-Produkt- und -Marken- sowie 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 Vergleichs- und Migration von Appflow. Rolle: Langes Marketing- oder Rechtsparagraph. Gesehen in: Seite ionic-appflow.astro. Bewahren Sie Capgo-Produkt- und -Marken- sowie 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 zum Vergleich von Capawesome. Rolle: Langes Marketing- oder Rechtsparagraph. Gesehen in: Seite capwesome.astro. Bewahren Sie Capgo-Produkt- und -Marken- sowie Entwicklertrems genau. Nachrichtenschlüssel `capwesome_cta_questions` (Capwesome-CTA-Fragen). | HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `consulting_faq_subtitle`). Seite/Bereich: Seite zu den Beratungsdiensten. Rolle: Untertitel oder Slogan. Gesehen in: Seite consulting.astro. Bewahren Sie Capgo-Produkt- und -Marken- sowie Entwicklertrems genau. Nachrichtenschlüssel `consulting_faq_subtitle` (Beratungsdienste-Faq-Untertitel). | Seite/Bereich: Seite zum Vergleich von Appflow. Rolle: Kurzer UI-Label oder Navigationspunkt. 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 aufzudrängen 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 antreibt, und dann aufgrund von Entfernung und Geschwindigkeit abschließt oder storniert.
Weitergehen von @capgo/capacitor-transitions
Abschnitt mit dem Titel „Weitergehen von @capgo/capacitor-transitions“Wenn Sie @capgo/capacitor-transitions zum Planen von nativer Medien- und Schnittstellenverhalten verwenden, verbinden Sie es mit Mit @capgo/capacitor-transitions für die native Fähigkeit in Mit @capgo/capacitor-transitions, Mit @capgo/capacitor-live-activities für die native Fähigkeit in Mit @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, and @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player.