Mouvement d'ordre 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 Ionic.
Fait glisser vers l'arrière
Activez un geste de bord iOS qui suit le doigt et peut activer automatiquement uniquement à l'intérieur de la Capacitor iOS native.
Agnostique par rapport au framework
Utilisez directement les composants web ou les helpers 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 routeur 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 d'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.
Utilisez-le lorsque vous avez besoin de:
- transitions de route push, pop et root qui ressemblent à 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 de l'iPhone facultatif qui suit le doigt de l'utilisateur
- helpers de configuration spécifiques au framework sans un routeur spécifique au framework
Cœur de API
Section intitulée « Cœur de API »<cap-router-outlet>gère la pile d'itinéraires animés.<cap-page>entoure chaque page.<cap-header>,<cap-content>et<cap-footer>identifier les régions qui devraient se déplacer ensemble.initTransitions(options?)initialise les liens de framework.setDirection('forward' | 'back' | 'root' | 'none')informe l'actualisation du prochain routeur de l'animation à exécuter.setupRouterOutlet(element, options?)connecte un outlet à la vie cycle et au comportement de geste.setupPage(element, callbacks?)enregistre les appels de rappel de la vie cycle de page.
Modèle de plateforme
Sous-titre « 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" contexte : fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison des alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe marketing ou juridique long. Voir : page alternatives.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA Alternatives). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe marketing ou juridique long. Voir : page ionic-appflow.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA Appflow). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe marketing ou juridique long. Voir : page capwesome.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA Capwesome). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `consulting_faq_subtitle`). Page/zone : page de services de conseil. Rôle : Sous-titre ou tagline de section. Voir : page consulting.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ de conseil). | Page/zone : page de comparaison/migration de Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Voir : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins 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 à 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
Titre de la section « Continuez de @capgo/capacitor-transitions »Si vous utilisez @capgo/capacitor-transitions pour planifier le comportement des médias et de l'interface native, connectez-l’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 for the implementation detail in @capgo/capacitor-live-activities, Utilisation de @capgo/capacitor-player vidéo pour la capacité native dans Utilisation de @capgo/capacitor-player vidéo, et @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player.