@capgo/capacitor-transitions

Animations de style Ionic

Utilisez des animations de transition iOS et Android inspirées des modèles de navigation mobile, sans déployer de composants Ionic.

Swipe back

Activez un geste edge iOS qui suit le doigt et peut s'activer automatiquement uniquement à l'intérieur de Capacitor iOS natif.

Indépendant de tout framework

Utilisez les web components directement ou des helpers pour React, Vue, Angular, Svelte et Solid.

Aucune dépendance UI

Utilisez votre propre toolbar, contenu, footer et router pendant que la bibliothèque coordonne les couches de transition.

Quand l'utiliser

@capgo/capacitor-transitions est destiné aux apps qui veulent des animations de pages de qualité Ionic sans adopter le système de composants d'Ionic. Il conserve la navigation dans votre router web actuel et anime les éléments de page à l'intérieur de la Capacitor WebView.

Utilisez-le lorsque vous avez besoin de :

• transitions push, pop et root qui respectent les conventions de la plateforme
• mouvement coordonné du header, du contenu et du footer
• page caching for fast back navigation
• un geste de retour par balayage sur l'edge d'iOS, optionnel, qui suit le doigt de l'utilisateur
• des helpers de configuration spécifiques au framework, sans routeur dédié

Remarque

Ce package n'affiche pas les éléments de navigation natifs UIKit ou Android. Pour les navbars, tabbars et shells de transition natifs, utilisez @capgo/native-navigation.

Démo

Flux de transition React

Cœur API

• <cap-router-outlet> gère la pile de routes animées.
• <cap-page> enveloppe chaque page.
• <cap-header>, <cap-content>, et <cap-footer> identifiez les régions qui doivent se déplacer ensemble.
• initTransitions(options?) initialise les liaisons du framework.
• setDirection('forward' | 'back' | 'root' | 'none') indique à la prochaine mise à jour du routeur quelle animation exécuter.
• setupRouterOutlet(element, options?) connecte un outlet au cycle de vie et aux comportements de geste.
• setupPage(element, callbacks?) enregistre les callbacks du cycle de vie des pages.

Modèle de plateforme

platform="auto" choisit le profil d'animation iOS ou Android depuis l'environnement d'exécution. Vous pouvez forcer platform="ios" ou platform="android" lors des tests.

swipe-gesture="auto" utilise les helpers de runtime Capacitor et n'active le geste edge que dans les apps iOS natives Capacitor. Utilisez true pour le forcer ou false pour le désactiver.

Le geste est implémenté dans la couche web. Il est conçu pour imiter la transition de retour par balayage (swipe-back) d'Ionic sur iOS en pilotant la progression de l'animation via la position du pointeur, puis en terminant ou en annulant l'action selon la distance et la vélocité.

Continuer avec @capgo/capacitor-transitions

Si vous utilisez @capgo/capacitor-transitions pour planifier le comportement des médias et de l'interface natifs, connectez-l’à Utiliser @capgo/capacitor-transitions pour la capacité native dans Using @capgo/capacitor-transitions, Utiliser @capgo/capacitor-live-activities pour la capacité native dans Utiliser @capgo/capacitor-live-activities @capgo/capacitor-live-activities pour le détail d'implémentation dans @capgo/capacitor-live-activities Utiliser @capgo/capacitor-video-player pour la capacité native dans Utiliser @capgo/capacitor-video-player, et @capgo/capacitor-video-player pour le détail d'implémentation dans @capgo/capacitor-video-player.