14 giorni di prova gratuita illimitata. Nessuna carta di credito richiesta

Installazione

Puoi utilizzare la nostra configurazione assistita dall'IA per installare il plugin. Aggiungi le Capgo competenze al tuo strumento di AI 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 l'installazione manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche per la piattaforma riportate di seguito:

1. Installa il pacchetto

   npm install @capgo/capacitor-transitions

2. Registra i componenti web

   import '@capgo/capacitor-transitions';

3. Avvolgi le pagine navigate

   <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 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 codice nel layer web della tua Capacitor app.

Impostazione 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, questa importazione rende gli elementi personalizzati validi in TSX automaticamente.

Se TypeScript continua a segnalare 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, posizionare quel file all'interno src/ è sufficiente. Per Next.js, mettilo in src/ o nella radice del progetto e assicurati che tsconfig.json lo includa:

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

Per impostazioni personalizzate di TypeScript o webpack che utilizzano un separatore types/ cartella, includi quella cartella invece:

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

Scorri indietro

Abilita o disabilita il gesto di edge iOS dal 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 dal 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 iOS nativo. Durante il gesto, la transizione segue il dito. Quando l'utente rilascia, la transizione si completa e chiede al browser di andare indietro nella storia, 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 native dovrebbe gestire le barre superiori e inferiori, mentre il contenuto web mantiene la movimentazione di pagina in stile Ionic.

1. Installare e sincronizzare 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 delle 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 di 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 rendere la barra superiore nativa di nuovo come un movimento <cap-header>Lascia @capgo/native-navigation mantenere la barra nativa e utilizzare @capgo/capacitor-transitions per il contenuto della pagina WebView sottostante.

Componenti

<cap-router-outlet>

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

Metodi:

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

<cap-page>

Rende 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	Default	Descrizione
fullscreen	boolean	false	Far scorrere il contenuto dietro l'intestazione
scroll-x	boolean	true	Abilita lo scorrimento orizzontale
scroll-y	boolean	true	Abilita lo scorrimento verticale

Assistenti di Framework

I framework espone gli stessi ausili 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 });

Punti di ingresso disponibili:

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

Keep going from Getting Started

Se stai utilizzando Getting Started a pianificare la migrazione e le operazioni aziendali, connettilo con Utilizzo di @capgo/capacitor-transizioni per la capacità nativa in Utilizzo di @capgo/capacitor-transizioni, Capgo per l'azienda per il workflow del prodotto in Capgo Enterprise, Alternative per Plugin Enterprise Ionic per il workflow del prodotto nelle alternative del Plugin Enterprise di Ionic Capgo Alternatives per il workflow del prodotto in Capgo Alternative e Capgo consulenza per il workflow del prodotto in Capgo Consultazione.