@capgo/capacitor-transitions

Motion in stile Ionic

Usa animazioni di routing iOS e Android modellate sui pattern di navigazione mobile, senza includere i componenti Ionic.

Swipe indietro

Abilita un gesto edge su iOS che segue il dito e può attivarsi automaticamente solo all'interno del Capacitor nativo di iOS.

Agnostico rispetto al framework

Usa direttamente i web components o gli helper per React, Vue, Angular, Svelte e Solid.

Nessun lock-in della UI

Usa la tua toolbar, il contenuto, il footer e il router, mentre la libreria coordina i layer di transizione.

Quando usarlo

@capgo/capacitor-transitions È ideale per le app che desiderano transizioni di pagina di qualità Ionic senza adottare il sistema di componenti di Ionic. Mantiene la navigazione nel tuo web router esistente e anima gli elementi della pagina all'interno della Capacitor WebView.

Usalo quando ti serve:

• transizioni push, pop e root route simili alle convenzioni della piattaforma
• movimento coordinato di header, contenuto e footer
• page caching per una navigazione rapida all'indietro
• un gesto opzionale di swipe-back su iOS che segue il dito dell'utente
• helper per la configurazione specifica del framework senza un router dedicato

Nota

Questo pacchetto non renderizza l'interfaccia di navigazione nativa UIKit o Android. Per navbar, tabbar e shell di transizione native, usa @capgo/native-navigation.

Demo

Flusso di transizione React

Il core API

• <cap-router-outlet> gestisce lo stack delle rotte animate.
• <cap-page> racchiude ogni pagina.
• <cap-header>, <cap-content>, e <cap-footer> identifica le regioni che devono muoversi insieme.
• initTransitions(options?) inizializza i binding del framework.
• setDirection('forward' | 'back' | 'root' | 'none') indica al prossimo aggiornamento del router quale animazione eseguire.
• setupRouterOutlet(element, options?) collega un outlet al ciclo di vita e al comportamento dei gesti.
• setupPage(element, callbacks?) registra i callback del ciclo di vita della pagina.

Modello della piattaforma

platform="auto" sceglie il profilo di animazione iOS o Android in base all'ambiente runtime. Puoi forzare platform="ios" o platform="android" durante i test.

swipe-gesture="auto" utilizza gli helper runtime di Capacitor e abilita il gesto edge solo nelle app Capacitor native per iOS. Usa true per forzarlo o false per disabilitarlo.

Il gesto è implementato nel web layer. È progettato per emulare la transizione swipe-back di Ionic su iOS, guidando il progresso dell'animazione dalla posizione del puntatore e completandola o annullandola in base a distanza e velocità.

Continua con @capgo/capacitor-transitions

Se stai usando @capgo/capacitor-transitions per pianificare il comportamento dei media nativi e dell'interfaccia, collegalo a Uso di @capgo/capacitor-transitions per la funzionalità nativa in Utilizzo di @capgo/capacitor-transitions, Uso di @capgo/capacitor-live-activities per la funzionalità nativa nella pagina Uso di @capgo/capacitor-live-activities, @capgo/capacitor-live-activities per il dettaglio implementativo in @capgo/capacitor-live-activities, Uso di @capgo/capacitor-video-player per la funzionalità nativa nella pagina Uso di @capgo/capacitor-video-player, e @capgo/capacitor-video-player per il dettaglio implementativo in @capgo/capacitor-video-player.