@capgo/capacitor-transizioni

Aggiungi transizioni di route native e swipe indietro opzionale per iOS a Capacitor senza adottare l'interfaccia utente di Ionic.

Inizia GitHub

Movimento a stile Ionic

Usa animazioni di rotta iOS e Android modellate sui pattern di navigazione mobile senza distribuire i componenti Ionic.

Indietro con swipe

Abilita un gesto di bordo iOS che segue il dito e può auto-abilitarsi solo all'interno di Capacitor iOS nativo.

Indipendente dal framework

Usa direttamente i componenti web o gli aiuti per React, Vue, Angular, Svelte e Solid.

Assenza di lock-in UI

Porta il tuo toolbar, contenuto, footer e router mentre la libreria coordina gli strati di transizione.

Quando Usarlo

@capgo/capacitor-transitions è per le app che vogliono una navigazione di pagina di alta qualità come quella di Ionic senza adottare il sistema di componenti di Ionic. Mantiene la navigazione nel proprio router web esistente e anima gli elementi di pagina all'interno del Capacitor WebView.

Usalo quando hai bisogno:

push, pop e transizioni della route radice che si sentono vicine alle convenzioni delle piattaforme
Movimento coordinato di intestazione, contenuto e piè di pagina
caching della pagina per la navigazione indietro veloce
un gesto di swipe indietro facoltativo per iOS che segue il dito dell'utente
Aiuto di configurazione specifico per framework senza router specifico per framework

Demo

Core API

<cap-router-outlet> possiede la pila di rotte animate.
<cap-page> avvolge ogni pagina.
<cap-header>, <cap-content>, e <cap-footer> identifica le regioni che dovrebbero muoversi insieme.
initTransitions(options?) inizializza le legature del framework.
setDirection('forward' | 'back' | 'root' | 'none') insegna all'aggiornamento del prossimo router quale animazione eseguire.
setupRouterOutlet(element, options?) collega un outlet al ciclo di vita e al comportamento di gesto.
setupPage(element, callbacks?) registra callback per il ciclo di vita della pagina.

Modello di piattaforma

platform="auto" seleziona il profilo di animazione iOS o Android dal ambiente di esecuzione. Puoi forzare platform="ios" o platform="android" quando si effettua il testing.

swipe-gesture="auto" utilizza Capacitor helper runtime e abilita solo il gesto di edge nei nativi iOS Capacitor app. Utilizza true forzare l'attivazione false per forzarlo o

The gesture is implemented in the web layer. It is designed to feel like Ionic’s iOS swipe-back transition by driving animation progress from the pointer position, then finishing or cancelling based on distance and velocity.

Continua da @capgo/capacitor-transizioni

Sezione intitolata “Continua da @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transizioni” @capgo/capacitor-transizioni per pianificare il comportamento dei media e dell'interfaccia nativa, connettilo con Utilizzare @capgo/capacitor-transizioni per la capacità nativa in Utilizzare @capgo/capacitor-transizioni Utilizzare @capgo/capacitor-attività-vive per la capacità nativa in Utilizzare @capgo/capacitor-attività-vive @capgo/capacitor-attività-vive per il dettaglio di implementazione in @capgo/capacitor-attività-vive Utilizzare @capgo/capacitor-lettore-video per la capacità nativa in Utilizzare @capgo/capacitor-lettore-video, e @capgo/capacitor-lettore-video per il dettaglio di implementazione in @capgo/capacitor-lettore-video