Mouvement à la manière d'Ionic
Utilisez les animations de route iOS et Android qui imitent les modèles de navigation mobile sans déployer les composants Ionic.
Retour en arrière par glissade
Activez un geste de bord iOS qui suit le doigt et peut activer automatiquement uniquement à l'intérieur de la Capacitor natif iOS.
Indépendant du framework
Utilisez les composants web directement ou des 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
Section intitulée « Quand l'utiliser »@capgo/capacitor-transitions est pour les applications qui veulent un mouvement de page d'Ionic sans adopter le système de composants d'Ionic. Cela 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:
- push, pop et transitions de route racine qui ressemblent à des conventions de plateforme
- une motion coordonnée de l'en-tête, du contenu et du pied de page
- un cache de page pour une navigation rapide en arrière
- un geste de retour par balayage sur iOS facultatif qui suit le doigt de l'utilisateur
- Aideurs de configuration spécifiques au framework sans un routeur spécifique au framework
Noeud central API
Section intitulée “Noeud central API”<cap-router-outlet>contrôle la pile d'itinéraires animés.<cap-page>entoure chaque page.<cap-header>,<cap-content>, et<cap-footer>détermine 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 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
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 mise en œuvre de tests.
swipe-gesture="auto" utilise les assistants de runtime Capacitor et active uniquement la gestuelle 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 retour par balayage 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 les transitions natives et le comportement de l'interface, connectez-le avec Utilisation de @capgo/capacitor-transitions pour la capacité native dans Utilisation de @capgo/capacitor-transitions, Utilisation de @capgo/capacitor-live-activities pour la capacité native dans Utilisation de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities pour le détail d'implémentation dans @capgo/capacitor-live-activities, Utilisation de @capgo/capacitor-video-player pour la capacité native dans Utilisation de @capgo/capacitor-video-player, et @capgo/capacitor-video-player pour le détail d'implémentation dans @capgo/capacitor-video-player.