Motion à la manière d'Ionic
Utilisez les animations de route iOS et Android modélisées d'après les modèles de navigation mobile sans déployer les composants Ionic.
Retour par glissade
Activez un geste d'arrière-plan iOS qui suit le doigt et peut activer automatiquement uniquement à l'intérieur des Capacitor iOS natifs.
Indépendant du framework
Utilisez les composants web directement ou les assistants pour React, Vue, Angular, Svelte et Solid.
Aucun 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.
Quand l'utiliser
Section intitulée « Quand l'utiliser »@capgo/capacitor-transitions c'est pour les applications qui veulent une animation de page de 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 proches des conventions de plateforme
- motion coordonnée de la barre d'outils, du contenu et de la 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
Fonctionnalité de base de API
Section intitulée “Fonctionnalité de base de API”<cap-router-outlet>contrôle 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 de framework.setDirection('forward' | 'back' | 'root' | 'none')indique à l'updateur de routeur suivant quelle animation exécuter.setupRouterOutlet(element, options?)connecte un outlet à la gestion de cycle de vie et de comportement de geste.setupPage(element, callbacks?)enregistre les appels de callbacks de cycle de vie de page.
Modèle de Plateforme
Sous-section intitulée “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 phase de test.
swipe-gesture="auto" utilise les assistants 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.
La gestuelle est mise en œuvre dans la couche web. Elle est conçue pour ressembler à la transition de swipe-back d'Ionic sur iOS en faisant progresser l'animation à partir de la position du pointeur, puis en terminant ou en annulant en fonction de la distance et de la vitesse.
Continuez de @capgo/capacitor-transitions
Section intitulée “Continuez de @capgo/capacitor-transitions”Si vous utilisez @capgo/capacitor-transitions pour planifier le comportement de médias et d'interface natifs, 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, Utilisez @capgo/capacitor-player vidéo natif pour la capacité native dans Utilisez @capgo/capacitor-player vidéo natif, et Utilisez @capgo/capacitor-player vidéo natif pour le détail d'implémentation dans @capgo/capacitor-player vidéo natif.