Saltare al contenuto

@capgo/capacitor-transizioni

Add native-feeling route transitions and optional iOS edge swipe-back to Capacitor apps without adopting Ionic UI.

Movimento a stile Ionic

Usa animazioni delle rotte iOS e Android modellate sui pattern di navigazione dei dispositivi mobili senza dover caricare i componenti Ionic.

Swipe back

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

Indipendente dal framework

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

Assenza di blocco UI

Porta il tuo proprio toolbar, contenuto, piè di pagina e router mentre la libreria coordina gli strati di transizione.

@capgo/capacitor-transitions è per le app che desiderano una movimentazione di pagina 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 WebView Capacitor.

Usalo quando hai bisogno:

  • transizioni di route push, pop e root che si avvicinano alle convenzioni delle piattaforme
  • movimento coordinato di intestazione, contenuto e piè di pagina
  • caching di pagina per la navigazione veloce all'indietro
  • un gesto di swipe indietro facoltativo per iOS che segue il dito dell'utente
  • aiuti di configurazione specifici per framework senza un router specifico per framework
Demo di transizione di pagina React animata che mostra la navigazione in avanti e indietro in un guscio di tipo Capacitor
Flusso di transizione React
  • <cap-router-outlet> gestisce la pila di rotte animate.
  • <cap-page> avvolge ogni pagina.
  • <cap-header>, <cap-content>e, e <cap-footer> identifica le aree che dovrebbero muoversi insieme.
  • initTransitions(options?) inizializza i legami del framework.
  • setDirection('forward' | 'back' | 'root' | 'none') informa l'aggiornamento del prossimo router quale animazione eseguire.
  • setupRouterOutlet(element, options?) connette un outlet alle proprietà di ciclo di vita e comportamento di gesto.
  • setupPage(element, callbacks?) registra callback di ciclo di vita della pagina.

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

swipe-gesture="auto" utilizza Capacitor helper di runtime e abilita solo il gesto di bordo in applicazioni iOS native Capacitor. true per forzarlo o false per disabilitarlo.

La gestualità è implementata nel layer web. È progettata per sentire come la 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à.

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