Movimiento de estilo de Ionic
Usar animaciones de rutas de iOS y Android basadas en patrones de navegación móvil sin enviar componentes de Ionic.
Deslizamiento hacia atrás
Habilitar un gesto de borde de iOS que sigue el dedo y puede habilitarse automáticamente solo dentro de Capacitor iOS nativo.
Independiente de marco
Usar componentes web directamente o ayudantes para React, Vue, Angular, Svelte y Solid.
No hay 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
Título de la sección “Cuándo Usarlo”@capgo/capacitor-transitions es para aplicaciones que desean una transición de página de calidad de 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.
Usa esto cuando necesites:
- transiciones de navegación push, pop y root que se sientan cercanas a las convenciones de la plataforma
- movimiento coordinado de cabecera, contenido y pie de página
- caché de página para una navegación rápida hacia atrás
- un gesto de retroceso de borde de iOS opcional que sigue el dedo del usuario
- ayudas de configuración específicas de framework sin un router específico de framework
Núcleo API
Título de la sección “Núcleo API”<cap-router-outlet>posee 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 enlaces de la capa de la aplicación.setDirection('forward' | 'back' | 'root' | 'none')le dice a la próxima actualización del router qué animación ejecutar.setupRouterOutlet(element, options?)conecta un outlet a la lógica de ciclo de vida y el comportamiento de gestos.setupPage(element, callbacks?)registra las llamadas a la lógica de ciclo de vida de las páginas.
Modelo de plataforma
Sección titulada “Modelo de plataforma”platform="auto" selecciona el perfil de animación de iOS o Android desde el entorno de tiempo de ejecución. Puede forzarlo platform="ios" o platform="android" cuando esté probando.
swipe-gesture="auto" utiliza los ayudantes de tiempo de ejecución Capacitor y habilita solo el gesto de borde en aplicaciones iOS nativas Capacitor. Utilice true para activarlo o false para desactivarlo.
El gesto se implementa en la capa web. Está diseñado para sentirse como la transición de retroceso de Ionic en iOS mediante la conducción del progreso de la animación desde la posición del puntero, luego finalizar o cancelar según la distancia y la velocidad.