@capgo/capacitor-transiciones

Agregar transiciones de rutas que sientan como nativas y deslizar hacia atrás en iOS con swipe opcional a las aplicaciones Capacitor sin adoptar la interfaz de Ionic.

Comenzar GitHub

Movimiento estilo Ionic

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

Vuelve atrás

Habilite un gesto de borde de iOS que sigue el dedo y puede habilitarse automáticamente solo dentro de Capacitor iOS nativo.

Independiente de la plataforma

Usar componentes web directamente o ayudantes para React, Vue, Angular, Svelte y Solid.

No bloqueo de interfaz de usuario

Trae tu propio barra de herramientas, contenido, pie de página y router mientras la biblioteca coordina capas de transición.

Cuándo Usarlo

@capgo/capacitor-transitions es para aplicaciones que desean una transición de página de alta calidad como Ionic sin adoptar el sistema de componentes de Ionic. Mantiene la navegación en su router web existente y anima los elementos de página dentro del Capacitor WebView.

Utilícelo cuando necesite:

transiciones de ruta push, pop y root que se sientan cerca de las convenciones de la plataforma
movimiento coordinado de encabezado, contenido y pie de página
caché de página para navegación rápida hacia atrás
un gesto de retroceso por swipe opcional en iOS que sigue el dedo del usuario
Ayudas de configuración específicas de marco sin un router específico de marco.

Demo

API

<cap-router-outlet> proporciona la pila de rutas animada.
<cap-page> envuelve cada página.
<cap-header>, <cap-content>, y <cap-footer> identifica las regiones que deben moverse juntas.
initTransitions(options?) inicializa las vinculaciones del marco.
setDirection('forward' | 'back' | 'root' | 'none') indica a la próxima actualización del router qué animación ejecutar.
setupRouterOutlet(element, options?) conecta una salida a la conducta de ciclo de vida y de gestos.
setupPage(element, callbacks?) registra callbacks de ciclo de vida de página.

Modelo de plataforma

platform="auto" selecciona el perfil de animación de iOS o Android desde el entorno de tiempo de ejecución. Puede forzar platform="ios" o platform="android" cuando se está probando.

swipe-gesture="auto" usa Capacitor ayudantes de tiempo de ejecución y habilita solo la gestura de borde en aplicaciones nativas iOS Capacitor. Utilice true para activarlo o false para desactivarlo.

La gestualidad se implementa en la capa web. Está diseñada para sentirse como la transición de retroceso de Ionic en iOS, impulsando el progreso de la animación desde la posición del puntero, y terminando o cancelando según la distancia y la velocidad.

Sigue adelante desde @capgo/capacitor-transiciones

Si estás utilizando @capgo/capacitor-transiciones para planificar el comportamiento de medios y interfaz nativos, conecta con Usando @capgo/capacitor-transiciones para la capacidad nativa en Usando @capgo/capacitor-transiciones, Usando @capgo/capacitor-live-activities para la capacidad nativa en Usando @capgo/capacitor-live-activities, @capgo/capacitor-actividades en vivo para el detalle de implementación en @capgo/capacitor-live-activities, Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos, y @capgo/capacitor-reproductor-de-videos para el detalle de implementación en @capgo/capacitor-reproductor-de-videos.