Moción de estilo de Ionic
Usar animaciones de rutas de iOS y Android modeladas según 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 nativos.
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
When usarlo@capgo/capacitor-transitions es para aplicaciones que desean una transición de página de calidad 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.
Usarlo cuando necesites:
- transiciones de navegación push, pop y root que se sientan cercanas a 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 del marco sin un router específico del marco
Núcleo de API
Sección titulada “Núcleo de API”<cap-router-outlet>se encarga de 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 las vinculaciones del marco.setDirection('forward' | 'back' | 'root' | 'none')indica al próximo router de actualización qué animación ejecutar.setupRouterOutlet(element, options?)conecta una salida a la vida cíclica y el comportamiento de gestos.setupPage(element, callbacks?)registra callbacks de vida de página.
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 ejecución. Puede forzarlo platform="ios" o platform="android" al realizar pruebas.
swipe-gesture="auto" usa ayudantes de ejecución Capacitor y habilita solo el gesto de borde en aplicaciones nativas de iOS 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 el progreso de la animación desde la posición del puntero, luego finalizar o cancelar según la distancia y la velocidad.
Sigue adelante desde @capgo/capacitor-transiciones
Sigue adelante desde @capgo/capacitor-transicionesSi 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-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo, @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo, Usando @capgo/capacitor-reproductor-de-video para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-video, y @capgo/capacitor-reproductor-de-videos para los detalles de implementación en @capgo/capacitor-reproductor-de-videos.