@capgo/capacitor-transitions

Mouvement Ionic

Utilisez des animations de route iOS et Android inspirées des modèles de navigation mobile sans déployer les composants Ionic.

Swipe back

Activer un geste de bordure iOS qui suit le doigt et peut activer automatiquement uniquement à l'intérieur de l'Capacitor iOS natif.

Indépendant du framework

Utilisez les composants web directement ou les assistants pour React, Vue, Angular, Svelte et Solid.

Pas de blocage de l'interface utilisateur

Apportez votre propre barre d'outils, contenu, pied de page et routeur tandis que la bibliothèque coordonne les couches de transition.

Quand l'utiliser

@capgo/capacitor-transitions est pour les applications qui veulent un mouvement de page de qualité Ionic sans adopter le système de composants Ionic. Il maintient la navigation dans votre routeur web existant et anime les éléments de page à l'intérieur de la Capacitor WebView.

Utilisez-le lorsque vous avez besoin de :

• push, pop et transitions de route root qui ressemblent aux conventions de la plateforme
• mouvement coordonné de l'en-tête, du contenu et du pied de page
• caching de page pour une navigation rapide en arrière
• un geste de retour par balayage sur l'iPhone facultatif qui suit le doigt de l'utilisateur
• aideurs de configuration spécifiques au framework sans un routeur spécifique au framework

Note

Ce package ne rend pas la navigation chrome native UIKit ou Android. Pour les navbars, tabbars et les coques de transition natives, utilisez @capgo/navigation native.

Demo

flux de transition React

noyau de API

• <cap-router-outlet> possède la pile d'routes animée.
• <cap-page> entoure chaque page.
• <cap-header>, <cap-content>, et <cap-footer> identifie les régions qui doivent se déplacer ensemble.
• initTransitions(options?) initialise les liens de framework.
• setDirection('forward' | 'back' | 'root' | 'none') indique au prochain mises à jour du routeur quelle animation exécuter.
• setupRouterOutlet(element, options?) connecte un outlet à la vie cycle et au comportement de geste.
• setupPage(element, callbacks?) registers page lifecycle callbacks.

Modèle de plateforme

platform="auto" choisissez le profil d'animation iOS ou Android à partir de l'environnement de runtime. Vous pouvez forcer platform="ios" ou platform="android" lors de la mise en œuvre de tests.

swipe-gesture="auto" utilise les assistants de runtime Capacitor et active uniquement le geste d'edge dans les applications iOS natives Capacitor. Utilisez true forcer l'affichage false pour l'activer ou

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.

Continuez de là depuis @capgo/capacitor-transitions

Titre de la section « Continuez de @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions » transitions @capgo/capacitor pour planifier les médias et le comportement de l'interface native, connectez-l’avec En utilisant @capgo/capacitor-transitions pour la capacité native dans En utilisant @capgo/capacitor-transitions En utilisant @capgo/capacitor-activités-en-vive pour la capacité native dans En utilisant @capgo/capacitor-activités-en-vive @capgo/capacitor-activités-en-vive pour le détail d'implémentation dans @capgo/capacitor-activités-en-vive En utilisant @capgo/capacitor-joueur-de-videos pour la capacité native dans En utilisant @capgo/capacitor-joueur-de-videos, et @capgo/capacitor-joueur-de-videos pour le détail d'implémentation dans @capgo/capacitor-joueur-de-videos