Inicia gratis

Instalación

Puede utilizar nuestra configuración asistida por IA para instalar el plugin. Agregue las Capgo habilidades a su herramienta de IA utilizando el siguiente comando:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Usa luego la siguiente solicitud:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-transitions` plugin in my project.

Si prefieres la configuración manual, instala el complemento ejecutando los siguientes comandos y sigue las instrucciones específicas de la plataforma a continuación:

1. Instalar el paquete

   npm install @capgo/capacitor-transitions

2. Registrar los componentes web

   import '@capgo/capacitor-transitions';

3. Envolver las páginas de navegación

   <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 la capa web de tu aplicación Capacitor.

React Setup

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>
  );
}

Configuración de React

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

If TypeScript aún informa de errores Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'agrega 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 React con webpack, coloque ese archivo dentro src/ Es suficiente. Para Next.js, colócalo en src/ es suficiente. Para Next.js, colócalo en tsconfig.json includes it:

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

Para configuraciones de TypeScript personalizadas o webpack que utilizan un separador types/ incluya ese carpeta en su lugar.

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

Volver atrás

Habilitar o deshabilitar el gesto de borde de iOS desde markup:

<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 activa 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 al historial del navegador que regrese, o cancela y restaura la página actual.

Para evitar que un elemento inicie el gesto, agrega data-swipe-gesture-ignore:

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

Con Navegación Nativa

Use @capgo/capacitor-transitions con @capgo/native-navigation Cuando native debe controlar las barras superior e inferior, mientras que el contenido web mantiene el movimiento de página de Ionic.

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

   npm install @capgo/native-navigation
   npx cap sync

2. Configure 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 de las páginas solo:

   <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. Mantenga la salida de transición web responsable de las páginas solo:

   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 render la barra superior nativa de nuevo como un elemento en movimiento <cap-header>Deje @capgo/native-navigation que la barra sea nativa y utilice @capgo/capacitor-transitions para el contenido de la página de WebView debajo de ella

Componentes

<cap-router-outlet>

Atributo	Tipo	Default	Descripción
platform	'ios' | 'android' | 'auto'	'auto'	Estilo de animación
duration	number	Plataforma predeterminada	Duración de la animación en milisegundos
keep-in-dom	boolean	true	Mantener páginas inactivas en el DOM
max-cached	number	10	Páginas máximas en caché
swipe-gesture	boolean | 'auto'	'auto'	Habilitar, deshabilitar o detectar nativamente el gesto de borde de iOS

Métodos:

• 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	Default	Descripción
fullscreen	boolean	false	Let content scroll behind the header
scroll-x	boolean	true	Habilite el desplazamiento horizontal
scroll-y	boolean	true	Habilite el desplazamiento vertical

Ayudas de marco

La entrada del framework expone los mismos ayudantes de núcleo:

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

Puntos de entrada disponibles:

Título de sección “Siga adelante desde Inicio” Getting Started a planificar la migración y las operaciones empresariales, conectándolo con Usando @capgo/capacitor-transiciones para la capacidad nativa en Usando @capgo/capacitor-transiciones, Capgo Empresas para el flujo de trabajo del producto en Capgo Enterprise, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Ionic Enterprise Plugin Alternatives, Capgo Alternativas para el flujo de trabajo del producto en Capgo Alternativas, y Capgo Asesoría para el flujo de trabajo del producto en Capgo Consultoría.