Movimiento de estilo de Ionic
Utilice animaciones de rutas iOS y Android basadas en patrones de navegación móvil sin enviar componentes de Ionic.
Pulsa hacia atrás
Habilite un gesto de borde de iOS que sigue el dedo y puede habilitarse automáticamente solo dentro de la Capacitor nativa de iOS.
Independiente de la plataforma
Utilice componentes web directamente o ayudantes para React, Vue, Angular, Svelte y Solid.
No bloqueo de interfaz de usuario
Traiga su propio menú 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 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 elementos de página dentro del Capacitor WebView.
Utilícelo cuando necesite:
- transiciones de ruta de raíz, empuje y pop 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 una 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
Demostración
Sección titulada “Demostración”
Core API
Sección titulada “Core API”<cap-router-outlet>proporciona la pila de rutas animada.<cap-page>envuelve cada página.<cap-header>,<cap-content>y<cap-footer>identificar las regiones que deben moverse juntas.initTransitions(options?)inicializa las vinculaciones del marco de trabajo.setDirection('forward' | 'back' | 'root' | 'none')indica a la próxima actualización del router qué animación ejecutar.setupRouterOutlet(element, options?)conecta un puerto a la conducta de ciclo de vida y de gestos.setupPage(element, callbacks?)registra las llamadas de retorno del ciclo de vida de la 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 forzar platform="ios" o platform="android" o
swipe-gesture="auto" uses Capacitor runtime helpers and enables the edge gesture only in native iOS Capacitor apps. Use true para obligarlo a que se active o false para desactivarlo.
La gestualidad se implementa en el 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
Título de sección “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 for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, and @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player.