Movimiento estilo Ionic
Utilice animaciones de ruta de iOS y Android basadas en patrones de navegación móvil sin enviar componentes Ionic.
Desliza hacia atrás
Habilite un gesto de borde de iOS que siga el dedo y pueda habilitarse automáticamente solo dentro de Capacitor nativo iOS.
Independiente de marco
Utilice 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.
@capgo/capacitor-transitions is for apps that want Ionic-quality page motion without adopting Ionic’s component system. It keeps navigation in your existing web router and animates page elements inside the Capacitor WebView.
transiciones de ruta 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 navegación rápida hacia atrás
- un gesto de retroceso de borde de iOS opcional que sigue el dedo del usuario
- ayudantes de configuración específicos del marco sin un router específico del marco
- Nota
<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 de trabajo.setDirection('forward' | 'back' | 'root' | 'none')indica a la siguiente actualización de router qué animación ejecutar.setupRouterOutlet(element, options?)conecta una salida a la lógica de ciclo de vida y el comportamiento de gestos.setupPage(element, callbacks?)registra las llamadas de retorno de la lógica de ciclo de vida de la 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 tiempo de ejecución. Puede forzarlo platform="ios" o platform="android" cuando esté probando.
swipe-gesture="auto" usa los ayudantes de tiempo de ejecución Capacitor y habilita solo el gesto de borde en las aplicaciones nativas de iOS Capacitor. Use true para forzarlo o false para deshabilitarlo.
La gestualidad se implementa en la capa web. Está diseñada para sentirse como la transición de retroceso de Ionic en iOS mediante el control del 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
Sección titulada “Sigue adelante desde @capgo/capacitor-transiciones”Si estás utilizando @capgo/capacitor-transiciones para planificar el comportamiento de medios nativos e interfaz, 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-live-activities 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.