@capgo/capacitor-transizioni

Aggiungi transizioni di route native e swipe-back opzionale per iOS ai tuoi app Capacitor senza adottare l'interfaccia utente di Ionic.

Inizia GitHub

Motore ioni-stile

Usa animazioni di rotta iOS e Android modellate dopo modelli di navigazione mobili senza inviare componenti Ionic.

Ritorna indietro

Abilita un gesto di bordo iOS che segue il dito e può auto-abilitare 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, piè di pagina e router mentre la libreria coordina layer di transizione.

Quando Usarlo

@capgo/capacitor-transitions è per le app che vogliono una pagina di movimento di alta qualità come 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 di route root che si avvicinano 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
Aiuti di configurazione specifici 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 i legami 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 testa.

swipe-gesture="auto" utilizza Capacitor helper runtime e abilita il gesto di edge solo negli app iOS native Capacitor. 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

Titolo della sezione “Continua da @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transizioni” Transizioni @capgo/capacitor per pianificare il comportamento dei media e dell'interfaccia nativi, 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