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 di stile Ionic

Usa animazioni di route per iOS e Android modellate sui pattern di navigazione mobili senza distribuire componenti di Ionic.

Ritorna con swipe

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

Indipendente dal framework

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

No vincolo di interfaccia UI

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

@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 route push, pop e root che si sentono vicine alle convenzioni della piattaforma
  • movimento coordinato di intestazione, contenuto e piè di pagina
  • cache di pagina per la navigazione indietro veloce
  • un gesto di swipe-back facoltativo per iOS che segue il dito dell'utente
  • aiuto di configurazione specifico del framework senza un router specifico del framework
Esempio animato di transizione di pagina React che mostra la navigazione in avanti e indietro in un guscio di shell Capacitor-stile
Flusso di transizione React
  • <cap-router-outlet> possiede la pila di rotte animate.
  • <cap-page> avvolge ogni pagina.
  • <cap-header>, <cap-content>e <cap-footer> identifica le aree che dovrebbero muoversi insieme.
  • initTransitions(options?) inizializza le legature del framework.
  • setDirection('forward' | 'back' | 'root' | 'none') insegna all'aggiornamento del router successivo quale animazione eseguire.
  • setupRouterOutlet(element, options?) connette un outlet al comportamento di ciclo di vita e di gesto.
  • setupPage(element, callbacks?) registra callback di ciclo di vita della pagina.

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

swipe-gesture="auto" utilizza Capacitor aiuti di runtime e abilita il gesto di bordo solo negli app iOS nativi Capacitor. Utilizza true per forzarlo su o false To disabilitarlo.

La gestualità è implementata nel layer web. È progettata per sentire come la transizione di ritorno 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-live-attività per la capacità nativa in Utilizzando @capgo/capacitor-live-attività, @capgo/capacitor-live-attività per i dettagli di implementazione in @capgo/capacitor-live-attivitàs Usando @capgo/capacitor-video-player per la capacità nativa in Usando @capgo/capacitor-video-player, e @capgo/capacitor-video-player per i dettagli di implementazione in @capgo/capacitor-video-player.