Inicio

1. Instale el paquete

   npm install @capgo/capacitor-transitions

2. Registrar los componentes web

   import '@capgo/capacitor-transitions';

3. Envolver páginas con rutas

   <cap-router-outlet platform="auto" swipe-gesture="auto">
     <cap-page>
       <cap-header slot="header">
         <h1>Inbox</h1>
       </cap-header>
   
       <cap-content slot="content">
         <button>Open message</button>
       </cap-content>
   
       <cap-footer slot="footer">
         <nav>Tabs</nav>
       </cap-footer>
     </cap-page>
   </cap-router-outlet>

4. Establecer la dirección antes de que tu router cambie de ruta

   import { setDirection } from '@capgo/capacitor-transitions/react';
   
   setDirection('forward');
   router.push('/message/42');
   
   setDirection('back');
   router.back();

Nota

No hay un paso de sincronización nativa para este paquete. Se ejecuta en el nivel web de tu aplicación Capacitor.

Configuración de React

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { initTransitions, setDirection, setupPage, setupRouterOutlet } from '@capgo/capacitor-transitions/react';
import '@capgo/capacitor-transitions';

initTransitions({ platform: 'auto' });

export function AppShell() {
  const outletRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!outletRef.current) return;

    setupRouterOutlet(outletRef.current, {
      platform: 'auto',
      swipeGesture: 'auto',
    });
  }, []);

  return (
    <cap-router-outlet ref={outletRef}>
      {/* Your router renders cap-page children here. */}
    </cap-router-outlet>
  );
}

export function InboxPage() {
  const navigate = useNavigate();
  const pageRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!pageRef.current) return;

    return setupPage(pageRef.current, {
      onDidEnter: () => console.log('Inbox visible'),
    });
  }, []);

  return (
    <cap-page ref={pageRef}>
      <cap-header slot="header">
        <h1>Inbox</h1>
      </cap-header>

      <cap-content slot="content">
        <button
          onClick={() => {
            setDirection('forward');
            navigate('/message/42');
          }}
        >
          Open message
        </button>
      </cap-content>
    </cap-page>
  );
}

React JSX TypeScript

Importar desde @capgo/capacitor-transitions/react incluye tipificaciones JSX para cap-router-outlet, cap-page, cap-header, cap-content, y cap-footer. En la mayoría de los proyectos de React, esa importación hace que los elementos personalizados sean válidos en TSX automáticamente.

Si TypeScript sigue reportando Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements', agregar un archivo de declaración de proyecto:

src/capgo-transiciones.d.ts

import '@capgo/capacitor-transitions/react';

Para Vite, Create React App y la mayoría de las aplicaciones de React con webpack, colocar ese archivo dentro de src/ es suficiente. Para Next.js, colóquelo en src/ o la raíz del proyecto y asegúrate de que tsconfig.json lo incluya:

{
  "include": ["src", "src/capgo-transitions.d.ts"]
}

Para configuraciones de TypeScript o webpack personalizadas que utilicen una carpeta separada types/ incluye esa carpeta en su lugar:

{
  "include": ["src", "types"]
}

Swipe Back

Copiar a portapapeles

<cap-router-outlet swipe-gesture="auto"></cap-router-outlet>
<cap-router-outlet swipe-gesture="true"></cap-router-outlet>
<cap-router-outlet swipe-gesture="false"></cap-router-outlet>

O desde JavaScript:

const outlet = document.querySelector('cap-router-outlet');

outlet?.setSwipeGesture('auto');
outlet?.setSwipeGesture(true);
outlet?.setSwipeGesture(false);

auto habilita el gesto solo cuando Capacitor informa un tiempo de ejecución nativo de iOS. Durante el gesto, la transición de página sigue el dedo. Cuando el usuario suelta, la transición se completa y pide a la historia del navegador que regrese, o cancela y restaura la página actual.

Para mantener un elemento desde que comience el gesto, agrega data-swipe-gesture-ignore:

<button data-swipe-gesture-ignore>Open drawer</button>

Con Navegación Nativa

Usar @capgo/capacitor-transitions con @capgo/native-navigation cuando la navegación nativa debe tener las barras superior e inferior mientras el contenido web mantiene la movimiento de página estilo Ionic.

1. Instale y sincronice el paquete de navegación nativa:

   npm install @capgo/native-navigation
   npx cap sync

2. Configurar el navegador nativo:

   import { NativeNavigation } from '@capgo/native-navigation';
   
   await NativeNavigation.configure({
     contentInsetMode: 'css',
   });
   
   await NativeNavigation.setNavbar({
     title: 'Inbox',
     backButton: { visible: false },
   });

3. Mantenga la salida de transición web responsable solo de páginas:

   <cap-router-outlet platform="auto" swipe-gesture="auto">
     <cap-page>
       <cap-content slot="content" fullscreen>
         <main class="native-page">Inbox content</main>
       </cap-content>
     </cap-page>
   </cap-router-outlet>

   .native-page {
     padding-top: var(--cap-native-navigation-top);
     padding-bottom: var(--cap-native-navigation-bottom);
   }

4. Hacer que ambos sistemas se controlen desde los mismos eventos del router:

   import { NativeNavigation } from '@capgo/native-navigation';
   import { setDirection } from '@capgo/capacitor-transitions/react';
   import { router } from './router';
   
   await NativeNavigation.addListener('navbarBack', () => {
     setDirection('back');
     router.back();
   });
   
   async function openMessage(id: string) {
     setDirection('forward');
     router.push(`/message/${id}`);
   
     await NativeNavigation.setNavbar({
       title: 'Message',
       backButton: { visible: true, title: 'Inbox' },
     });
   }

No renderice la barra superior nativa nuevamente como un elemento en movimiento. <cap-header>Deje @capgo/native-navigation mantener la barra nativa y utilice @capgo/capacitor-transitions para el contenido de la página WebView debajo de ella.

Componentes

<cap-router-outlet>

Atributo	Tipo	Valor por defecto	Descripción
platform	'ios' | 'android' | 'auto'	'auto'	Estilo de animación
duration	number	Por defecto del plataforma	Duración de la animación en milisegundos
keep-in-dom	boolean	true	Mantener páginas inactivas en el DOM
max-cached	number	10	Número máximo de páginas en caché
swipe-gesture	boolean | 'auto'	'auto'	Activar, desactivar o detectar nativamente el gesto de borde de iOS

Metodos:

• push(element, config?)
• pop(config?)
• setRoot(element, config?)
• setSwipeGesture(true | false | 'auto')

<cap-page>

Envuelve una página y emite eventos de ciclo de vida:

• cap-will-enter
• cap-did-enter
• cap-will-leave
• cap-did-leave

<cap-content>

Atributo	Tipo	Valor por defecto	Descripción
fullscreen	boolean	false	Hacer que el contenido se desplace detrás del encabezado
scroll-x	boolean	true	Habilitar el desplazamiento horizontal
scroll-y	boolean	true	Habilitar el desplazamiento vertical

Ayudas del marco

Los puntos de entrada del marco expuestos muestran los mismos ayudantes básicos:

import { initTransitions, setDirection, setupPage, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });
setDirection('forward');
setupRouterOutlet(element, { platform: 'auto', swipeGesture: 'auto' });
setupPage(element, { onWillEnter, onDidEnter, onWillLeave, onDidLeave });

Puntos de entrada disponibles:

• @capgo/capacitor-transitions/react
• @capgo/capacitor-transitions/vue
• @capgo/capacitor-transitions/angular
• @capgo/capacitor-transitions/svelte
• @capgo/capacitor-transitions/solid

Sigue adelante desde Inicio rápido

Si estás utilizando Inicio rápido para planificar la migración y las operaciones de empresa, conecta con Usando @capgo/capacitor-transiciones para la capacidad nativa en Usando @capgo/capacitor-transiciones, Capgo Empresa para el flujo de trabajo del producto en Capgo Empresa, Alternativas del plugin de Ionic Empresa para el flujo de trabajo del producto en Alternativas del plugin de Ionic Empresa, Capgo Alternativas para el flujo de trabajo del producto en Capgo Alternativas, y Capgo Consultoría para el flujo de trabajo del producto en Capgo Consultoría.