@ capgo/ capacitor-transizioni

Aggiungi transizioni di rotta che danno un senso di nascita nativa e optional swipe-back per l'edge iOS a Capacitor senza adottare l'interfaccia utente di Ionic.

Inizia GitHub

Motore di animazione a stile Ionic

Utilizza le animazioni delle rotte iOS e Android modellate sui pattern di navigazione mobili senza distribuire i componenti Ionic.

Indietro con lo swipe

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

Agnostico rispetto al framework

Utilizza 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 gli strati di transizione.

Quando Usarlo

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

Usalo quando hai bisogno:

transizioni di push, pop e route root che si avvicinano alle convenzioni delle piattaforme
movimento coordinato del capo, del contenuto e del piè di pagina
cache di pagina per la navigazione di ritorno veloce
un gesto di swipe-back facoltativo per iOS che segue il dito dell'utente
aiuti di configurazione specifici del framework senza un router specifico del framework

Demo

Esempio animato di transizione di pagina React che mostra la navigazione in avanti e indietro in un guscio di tipo Capacitor — Ciclo di transizione React

Core API

<cap-router-outlet> gestisce la pila di route animate.
<cap-page> avvolge ogni pagina.
<cap-header>, <cap-content>e, e <cap-footer> identifica le regioni che dovrebbero muoversi insieme.
initTransitions(options?) inizializza i legami del framework.
setDirection('forward' | 'back' | 'root' | 'none') informa l'aggiornamento del prossimo router sulle animazioni da eseguire.
setupRouterOutlet(element, options?) connette un outlet alle funzionalità di ciclo di vita e comportamento di gesto.
setupPage(element, callbacks?) registra callback di ciclo di vita della pagina.

Modello di piattaforma

platform="auto" seleziona il profilo di animazione iOS o Android dal runtime. Puoi forzare platform="ios" o platform="android" o quando si testa.

swipe-gesture="auto" utilizza gli aiuti di runtime Capacitor e abilita il gesto di bordo solo negli app iOS nativi Capacitor. Utilizza true Forzare la sua attivazione o false Disabilitare la sua attivazione.

La gestualità è implementata nel layer web. È progettata per avere un aspetto simile alla transizione di swipe-back di Ionic per iOS, guidando il progresso dell'animazione dalla posizione del puntatore, poi finendo o annullando in base alla distanza e alla velocità.

Continua da @capgo/capacitor-transizioni

Se stai utilizzando @capgo/capacitor-transizioni per pianificare il comportamento di media e 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 Attività in tempo reale @capgo/capacitor per i dettagli di implementazione in Attività in tempo reale @capgo/capacitor Utilizzo di @capgo/capacitor-video-player per la capacità nativa in Utilizzo di @capgo/capacitor-video-player, e Attività in tempo reale @capgo/capacitor per i dettagli di implementazione in Attività in tempo reale @capgo/capacitor