@capgo/capacitor-transitions

Ajoutez des transitions de route ressemblant à celles des applications natives et un balayage facultatif de swipe arrière sur iOS dans les applications Capacitor sans adopter l'interface utilisateur d'Ionic.

Commencez GitHub

Mouvement d'Ionic

Utilisez les animations de route iOS et Android qui imitent les modèles de navigation mobile sans envoyer les composants d'Ionic.

Retour par balayage

Activez un geste de swipe arrière sur iOS qui suit le doigt et peut activer automatiquement uniquement à l'intérieur des applications natives Capacitor iOS.

Agnostique au 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

@capgo/capacitor-transitions est destiné aux applications qui souhaitent une animation de page de 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 Capacitor WebView.

Utilisez-le lorsque vous avez besoin de :

des transitions de route push, pop et root qui ressemblent à celles 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 swipe-back 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

<cap-router-outlet> possède la pile d'itinéraires animés.
<cap-page> entoure chaque page.
<cap-header>, <cap-content>et <cap-footer> identifie les régions qui doivent se déplacer ensemble.
initTransitions(options?) initialise les liaisons du 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

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 phase de test.

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 l'activer ou false pour le désactiver.

Le geste est implémenté dans la couche web. Il est conçu pour ressembler à la transition de retour par balayage 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.