Mouvement d'Ionic
Utilisez les animations de route iOS et Android modélisées d'après les modèles de navigation mobile sans expédier les composants d'Ionic.
Balayage de retour
Activez un geste de balayage sur les bords de l'iPhone qui suit le doigt et peut activer automatiquement uniquement à l'intérieur des applications natives Capacitor iOS.
Indépendant du 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 navigateur tout en laissant la bibliothèque coordonner les couches de transition.
Quand l'utiliser
Section intitulée « Quand l'utiliser »@capgo/capacitor-transitions est destinée aux applications qui souhaitent une animation de page de qualité Ionic sans adopter le système de composants Ionic. Elle 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:
- des transitions de route push, pop et root qui ressemblent à des conventions de plateforme
- une animation 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 swipe facultatif sur iOS qui suit le doigt de l'utilisateur
- des aides 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>gère la pile d'itinéraires animés.<cap-page>entoure chaque page.<cap-header>,<cap-content>et identifie les régions qui doivent se déplacer ensemble.<cap-footer>initialise les liens de framework.initTransitions(options?)indique au prochain mappage de routeur quelle animation exécuter.setDirection('forward' | 'back' | 'root' | 'none')owns the animated route stack.setupRouterOutlet(element, options?)connecte un prong à la vie et au comportement de geste.setupPage(element, callbacks?)enregistre les appels de rappel de la 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 aides de runtime Capacitor et active uniquement le geste de bordure dans les applications iOS natives Capacitor. Utilisez true pour le forcer ou false pour le désactiver.
Le geste est mis en œuvre dans la couche web. Il est conçu 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 à partir de @capgo/capacitor-transitions
Section intitulée « Continuez à 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 Utilisez @capgo/capacitor-transitions pour la capacité native dans Utilisez @capgo/capacitor-transitions ; Utilisez @capgo/capacitor-live-activities pour la capacité native dans Utilisez @capgo/capacitor-live-activities ; @capgo/capacitor-live-activities pour le détail d'implémentation dans @capgo/capacitor-live-activities ; Utilisez @capgo/capacitor-video-player pour la capacité native dans Utilisez @capgo/capacitor-video-player, et @capgo/capacitor-player-vidéo pour les détails d'implémentation dans @capgo/capacitor-player-vidéo.