@capgo/capacitor-transizioni

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

Motore di Ionic

Utilizza animazioni di route per iOS e Android modellate sui pattern di navigazione mobile senza inviare componenti di Ionic.

Ritorna

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

Indipendente dal framework

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

Nessuna lock-in UI

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

Quando utilizzarlo

@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 proprio router web esistente e anima gli elementi di pagina all'interno del WebView Capacitor.

Usalo quando hai bisogno:

transizioni di push, pop e root route che si sentono vicine alle convenzioni della piattaforma
movimento coordinato di intestazione, contenuto e piè di pagina
cache di pagina per la navigazione veloce all'indietro
un gesto di swipe-back facoltativo per iOS che segue il dito dell'utente
aiuto di configurazione specifico per framework senza un router specifico per framework

Demo

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

Core API

<cap-router-outlet> gestisce lo stack delle 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') indica all'aggiornamento del prossimo router quale animazione eseguire.
setupRouterOutlet(element, options?) collega un outlet al comportamento di ciclo di vita e di gesti.
setupPage(element, callbacks?) registra callback per il ciclo di vita della pagina.

Modello di piattaforma

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

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

Il gesto è implementato nel layer web. È progettato per sentire come la transizione di ritorno a swipes 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 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, @capgo/capacitor-attività-vive per il dettaglio di implementazione in @capgo/capacitor-attività-vive, Utilizzando @capgo/capacitor-lettore-video per la capacità nativa in Utilizzando @capgo/capacitor-lettore-video, e @capgo/capacitor-video-player per i dettagli di implementazione in @capgo/capacitor-video-player.