Mouvement Ionic-style
Utilisez les animations de route iOS et Android modèles après les modèles de navigation mobile sans expédier les composants Ionic.
@capgo/capacitor-transitions
Add native-feeling route transitions and optional iOS edge swipe-back to Capacitor apps without adopting Ionic UI.
Retour par glissade
Activez un geste de bord iOS qui suit le doigt et peut activer automatiquement uniquement à l'intérieur de l'Capacitor iOS natif.
Agnostique par rapport au framework
Utilisez directement les composants web 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 tout en laissant la bibliothèque coordonner les couches de transition.
When To Use It
Section intitulée « When To Use It »@capgo/capacitor-transitions C'est pour les applications qui veulent une motion de page d'une qualité Ionic sans adopter le système de composants Ionic. Il garde 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:
- transitions de route push, pop et root qui ressentent proche des conventions de plateforme
- motion coordonnée de la barre d'outils, du contenu et de la pied de page
- cache de page pour une navigation rapide en arrière
- un geste de retour par balayage d'iPhone facultatif qui suit le doigt de l'utilisateur
- helpers de configuration spécifiques au framework sans un routeur spécifique au framework
Démonstration
Sous-titre « Démonstration »
API de base
Sous-titre « API de base »<cap-router-outlet>possède la pile de routes animées.<cap-page>enveloppe chaque page.<cap-header>,<cap-content>et<cap-footer>identifie les régions qui devraient se déplacer ensemble.initTransitions(options?)initialise les liens du framework.setDirection('forward' | 'back' | 'root' | 'none')indique à l'updateur de routeur suivant quelle animation exécuter.setupRouterOutlet(element, options?)reli l'output à des comportements de cycle de vie et de gestes.setupPage(element, callbacks?)enregistre les appels de callbacks de cycle de vie de page.
Modèle de Plateforme
Sous-titre “Modèle de Plateforme”platform="auto" choisit le profil d'animation iOS ou Android à partir de l'environnement de runtime. Vous pouvez forcer platform="ios" ou platform="android" lors de la phase de test.
swipe-gesture="auto" utilise les aides de runtime Capacitor et active uniquement le geste de bordure dans les applications iOS natives Capacitor. Utilisez true pour l'activer ou false pour le désactiver.
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à à partir de @capgo/capacitor-transitions
Section intitulée “Continuez de là à partir de @capgo/capacitor-transitions”Si vous utilisez @capgo/capacitor-transitions pour planifier le comportement de médias et d'interface natives, connectez-le avec En utilisant @capgo/capacitor-transitions pour la capacité native dans En utilisant @capgo/capacitor-transitions En utilisant @capgo/capacitor-live-activities pour la capacité native dans En utilisant @capgo/capacitor-live-activities @capgo/capacitor-live-activities pour le détail d'implémentation dans @capgo/capacitor-live-activities Utiliser @capgo/capacitor-player-vidéo pour la capacité native en Utiliser @capgo/capacitor-player-vidéo, et @capgo/capacitor-player-vidéo pour le détail d'implémentation en @capgo/capacitor-player-vidéo.