@capgo/capacitor-transitions

Añade transiciones de ruta con sensación nativa y el gesto de swipe-back en iOS a tus apps de Capacitor sin usar Ionic UI.

Comenzar GitHub

Movimiento estilo Ionic

Usa animaciones de ruta en iOS y Android basadas en patrones de navegación móvil sin incluir componentes de Ionic.

Deslizar atrás

Habilita un gesto de borde en iOS que sigue al dedo y puede activarse automáticamente solo dentro de Capacitor iOS nativo.

Agnóstico al framework

Usa web components directamente o helpers para React, Vue, Angular, Svelte y Solid.

Sin dependencia de UI

Usa tu propio toolbar, contenido, footer y router mientras la librería coordina las capas de transición.

Cuándo usarlo

@capgo/capacitor-transitions es para apps que quieren movimiento de página con la calidad de Ionic sin adoptar su sistema de componentes. Mantiene la navegación en tu web router actual y anima los elementos de la página dentro de la Capacitor WebView.

Úsalo cuando necesites:

transiciones push, pop y de ruta raíz cercanas a las convenciones de cada plataforma
movimiento coordinado de header, contenido y footer
caché de páginas para una navegación rápida hacia atrás
un gesto opcional de deslizamiento lateral en iOS que sigue el dedo del usuario
ayudantes de configuración específicos de cada framework sin un router dedicado

Demo

Núcleo de API

<cap-router-outlet> gestiona la pila de rutas animadas.
<cap-page> envuelve cada página.
<cap-header>, <cap-content>, y <cap-footer> identifica las regiones que deben moverse juntas.
initTransitions(options?) inicializa los bindings del framework.
setDirection('forward' | 'back' | 'root' | 'none') indica a la siguiente actualización del router qué animación ejecutar.
setupRouterOutlet(element, options?) conecta un outlet al comportamiento de gestos y ciclos de vida.
setupPage(element, callbacks?) registers page lifecycle callbacks.

Modelo de Plataforma

platform="auto" elige el perfil de animación de iOS o Android desde el entorno de ejecución. Puedes forzar platform="ios" o platform="android" al probar.

swipe-gesture="auto" utiliza helpers de runtime de Capacitor y habilita el gesto edge solo en apps Capacitor nativas de iOS. Usa true para forzarlo o false para desactivarlo.

El gesto se implementa en la capa web. Está pensado para sentirse como la transición swipe-back de iOS de Ionic: controla el progreso de la animación a partir de la posición del puntero y luego finaliza o cancela según la distancia y la velocidad.

Sigue con @capgo/capacitor-transitions

Si estás usando @capgo/capacitor-transitions para planificar el comportamiento de los medios nativos y la interfaz, conéctalo con Uso de @capgo/capacitor-transitions para la capacidad nativa en Uso de @capgo/capacitor-transitions, Uso de @capgo/capacitor-live-activities para la capacidad nativa en Uso de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para los detalles de implementación en @capgo/capacitor-live-activities, Uso de @capgo/capacitor-video-player para la capacidad nativa en Uso de @capgo/capacitor-video-player, y @capgo/capacitor-video-player para el detalle de implementación en @capgo/capacitor-video-player.