Movimento di stile Ionic
Usa animazioni di rotta per iOS e Android modellate sui pattern di navigazione mobile senza distribuire i componenti di Ionic.
Ritorna con un gesto
Abilita un gesto di schermo laterale di iOS che segue il dito e può abilitarsi automaticamente solo all'interno delle app Capacitor native di iOS.
Indipendente dal framework
Usa direttamente i componenti web o gli aiuti per React, Vue, Angular, Svelte e Solid.
Nessuna lock-in dell'interfaccia utente
Porta il tuo toolbar, il contenuto, il piede e il router mentre la libreria coordina i layer di transizione.
When Usare Questo
Sezione intitolata “When To Use It”@capgo/capacitor-transitions è per le app che desiderano 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 Capacitor WebView.
Usalo quando hai bisogno di:
- 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 veloce all'indietro
- 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
Core API
Sezione intitolata “Core API”<cap-router-outlet>possiede 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 le legature del framework.setDirection('forward' | 'back' | 'root' | 'none')insegna all'aggiornamento del router successivo quale animazione eseguire.setupRouterOutlet(element, options?)connette un outlet alle proprietà di ciclo di vita e comportamento di gesto.setupPage(element, callbacks?)registra le callback dei ciclo di vita delle pagine.
Modello di piattaforma
Sezione intitolata “Modello di piattaforma”platform="auto" sceglie il profilo di animazione iOS o Android dal ambiente di esecuzione. Puoi forzarlo platform="ios" o platform="android" 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 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à.