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 las aplicaciones nativas Capacitor de iOS.
Indiferente a marcos
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 los elementos de página dentro del Capacitor WebView.
Uselo cuando necesite:
- transiciones de ruta push, pop y root que se sientan cercanas a las convenciones de la plataforma
- movimiento coordinado de encabezado, contenido y pie de página
- almacenamiento de páginas 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
El núcleo de API
Section titled “Core API”<cap-router-outlet>Envuelve cada página.<cap-page>owns the animated route stack.<cap-header>,<cap-content>y<cap-footer>identifica las regiones que deben moverse juntas.initTransitions(options?)inicializa los enlaces del marco de trabajo.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 y el comportamiento de gestos.setupPage(element, callbacks?)registra las llamadas de retorno de la 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" cuando se esté probando.
swipe-gesture="auto" usa los ayudantes de tiempo de ejecución Capacitor y habilita solo el gesto de borde en aplicaciones nativas de iOS Capacitor. Utilice true para obligarlo a funcionar o false para deshabilitarlo.
La gestualidad se implementa en el capa web. Está diseñada para sentirse como la transición de retroceso de Ionic en iOS mediante el avance 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 y interfaz nativa, 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-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo 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.