Motores de estilo de Ionic
Utilice animaciones de rutas de iOS y Android basadas en patrones de navegación móvil sin enviar componentes de Ionic.
Desliza hacia atrás
Habilite un gesto de borde de iOS que sigue el dedo y puede habilitarse automáticamente solo dentro de Capacitor nativos de iOS.
Independiente de marco
Utilice componentes web directamente o ayudantes para React, Vue, Angular, Svelte y Solid.
Sin bloqueo de interfaz de usuario
Traiga su propia barra de herramientas, contenido, pie de página y router mientras la biblioteca coordina capas de transición.
¿Cuándo usarlo?
Sección titulada “¿Cuándo usarlo?”@capgo/capacitor-transitions Es para aplicaciones que desean motores 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 elementos de página dentro del Capacitor WebView.
Use it when you need:
- transiciones de empuje, empuje y ruta raíz que se sienten 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 de borde de iOS opcional que sigue el dedo del usuario
- ayudas de configuración específicas de marco sin un router específico de marco
Núcleo de API
Sección titulada “Núcleo de 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 las vinculaciones del marco.setDirection('forward' | 'back' | 'root' | 'none')le dice a la próxima actualización de router qué animación ejecutar.setupRouterOutlet(element, options?)conecta un puerto a comportamiento de ciclo de vida y de gestos.setupPage(element, callbacks?)registra callbacks de ciclo de vida de página.
Modelo de plataforma
Título de la sección “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" al realizar pruebas.
swipe-gesture="auto" usa ayudantes de tiempo de ejecución Capacitor y habilita el gesto de borde solo 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 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
Título de la sección “Sigue adelante desde @capgo/capacitor-transiciones”Si está utilizando transiciones de @capgo/capacitor para planificar el comportamiento de medios y interfaces nativos, conecte 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, transiciones de @capgo/capacitor-actividades-en-vivo para el detalle de implementación en transiciones de @capgo/capacitor-actividades-en-vivo, Usando @capgo/capacitor-reproductor-de-video para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-video, y transiciones de @capgo/capacitor-reproductor-de-video para el detalle de implementación en transiciones de @capgo/capacitor-reproductor-de-video.