Mouvement en style Ionic
Utilisez les animations de route iOS et Android qui imitent 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 de la Capacitor native iOS.
Agnostique par rapport au framework
Utilisez directement les composants web ou les assistants pour React, Vue, Angular, Svelte et Solid.
Aucun blocage de l'interface utilisateur.
Apportez votre propre barre d'outils, votre contenu, votre pied de page et votre navigateur tandis que la bibliothèque coordonne les couches de transition.
Quand l'utiliser
Sous-titre « Quand l'utiliser »@capgo/capacitor-transitions est pour les applications qui souhaitent 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 fenêtre de navigation Capacitor.
L'utilisez lorsque vous avez besoin de:
- des transitions de route push, pop et root qui ressentent proches des conventions de plateforme
- une motion coordonnée de barre d'outils, de contenu et de pied de page
- une mise en cache de page pour une navigation rapide en arrière
- un geste de balayage de l'arrière-plan iOS facultatif qui suit le doigt de l'utilisateur
- des assistants de configuration spécifiques au framework sans un routeur spécifique au framework
Noyau API
Section intitulée « Noyau API »<cap-router-outlet>possède la pile d'itinéraires animés.<cap-page>entoure chaque page.<cap-header>,<cap-content>et<cap-footer>identifiez les régions qui doivent se déplacer ensemble.initTransitions(options?)initialise les liens de framework.setDirection('forward' | 'back' | 'root' | 'none')informe l'actualisation du routeur suivant de l'animation à exécuter.setupRouterOutlet(element, options?)connecte un outlet à la vie et au comportement de geste.setupPage(element, callbacks?)enregistre les appels de rappel de la vie de page.
Modèle de plateforme
Titre de la section « 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" ou
swipe-gesture="auto" uses Capacitor runtime helpers and enables the edge gesture only in native iOS Capacitor apps. Use 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 en fonction 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
Titre de la section « Continuez de @capgo/capacitor-transitions »Si vous utilisez @capgo/capacitor-transitions pour planifier le comportement de médias et d'interface natifs, connectez-l’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-activités en direct pour le détail d'implémentation dans @capgo/capacitor-activités en direct Utilisation de @capgo/capacitor-joueur de vidéo pour la capacité native dans Utilisation de @capgo/capacitor-joueur de vidéo, et @capgo/capacitor-joueur de vidéo pour le détail d'implémentation dans @capgo/capacitor-joueur de vidéo.