Iniziare

Installazione

Puoi utilizzare la nostra configurazione assistita dall'IA per installare il plugin. Aggiungi le Capgo abilitazioni al tuo strumento di IA utilizzando il seguente comando:

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

Usa poi il seguente prompt:

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

Se preferisci la configurazione manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche del tuo platform sotto:

1. Installa il pacchetto

   npm install @capgo/capacitor-transitions

2. Registra i componenti web

   import '@capgo/capacitor-transitions';

3. Avvolgi le pagine di routing

   <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. Imposta la direzione prima che il tuo router cambi rotta

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

Nota

Non esiste un passaggio di sincronizzazione nativa per questo pacchetto. Esegue il suo funzionamento nel layer web della tua Capacitor app.

Configurazione 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

Importazione da @capgo/capacitor-transitions/react include le annotazioni JSX per cap-router-outlet, cap-page, cap-header, cap-content, e cap-footer. In quasi tutti i progetti React, quella importazione rende gli elementi personalizzati validi in TSX automaticamente.

Se TypeScript segnala ancora Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements', aggiungi un file di dichiarazione del progetto:

src/capgo-transizioni.d.ts

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

Per Vite, Create React App e la maggior parte degli app React webpack, mettere quel file dentro src/ è sufficiente. Per Next.js, mettilo in src/ o la radice del progetto e assicurati che tsconfig.json lo includa:

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

Per impostazioni TypeScript o webpack personalizzate che utilizzano una cartella separata types/ includi quella cartella al suo posto:

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

Indietro con lo scorrimento

Abilita o disabilita il gesto di scorrimento laterale iOS da 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>

Ora da JavaScript:

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

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

auto abilita il gesto solo quando Capacitor segnala un runtime nativo iOS. Durante il gesto, la transizione della pagina segue il dito. Quando l'utente rilascia, la transizione si completa e chiede alla storia del browser di tornare indietro, o annulla e ripristina la pagina corrente.

Per impedire a un elemento di iniziare il gesto, aggiungi data-swipe-gesture-ignore:

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

Con navigazione nativa

Usa @capgo/capacitor-transitions con @capgo/native-navigation quando il nativo deve possedere le barre superiore e inferiore mentre il contenuto web mantiene la movimentazione di pagina dello stile Ionic.

1. Installa e sincronizza il pacchetto di navigazione nativa:

   npm install @capgo/native-navigation
   npx cap sync

2. Configura il Chrome nativo:

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

3. Mantieni l'uscita di transizione web responsabile solo per le pagine:

   <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. Fai avanzare entrambi i sistemi dagli stessi eventi 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' },
     });
   }

Non rendi di nuovo la barra superiore nativa come un elemento in movimento <cap-header>. Lascia @capgo/native-navigation Mantieni la barra nativa e utilizzala @capgo/capacitor-transitions per il contenuto della pagina WebView sotto di esso.

Componenti

<cap-router-outlet>

Attributo	Tipo	Valore predefinito	Descrizione
platform	'ios' | 'android' | 'auto'	'auto'	Stile di animazione
duration	number	Predefinito del sistema	Durata dell'animazione in millisecondi
keep-in-dom	boolean	true	Conserva le pagine inattive nel DOM
max-cached	number	10	Pagine cache massime
swipe-gesture	boolean | 'auto'	'auto'	Abilita, disabilita o rileva nativamente il gesto di bordo iOS

Metodi:

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

<cap-page>

Rappresenta una pagina e emette eventi di ciclo di vita:

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

<cap-content>

Attributo	Tipo	Predefinito	Descrizione
fullscreen	boolean	false	Consenti allo scorrimento del contenuto dietro l'intestazione
scroll-x	boolean	true	Abilita lo scorrimento orizzontale
scroll-y	boolean	true	Abilita lo scrolling verticale

Aiuti del framework

Gli entrypoint del framework espongono gli stessi aiuti core:

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

Disponibili gli entrypoint:

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

Continua da Inizia con l'installazione

Se stai utilizzando Inizia con l'installazione per pianificare la migrazione e le operazioni aziendali, connettilo con Utilizzando @capgo/capacitor-transizioni per la capacità nativa in Utilizzo di @capgo/capacitor-transizioni, Capgo Enterprise per il flusso di lavoro del prodotto in Capgo Enterprise, Alternative plugin per Ionic Enterprise per il flusso di lavoro del prodotto in Alternative plugin per Ionic Enterprise, Capgo Alternatives per il flusso di lavoro del prodotto in Capgo Alternatives, e Consulenza Capgo per il flusso di lavoro del prodotto in Consulenza Capgo.