Getting Started

Copiez une suggestion de configuration avec les étapes d'installation et la guide Markdown complet pour ce plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-transitions`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/transitions/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Installation

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les compétences Capgo à votre outil d'IA en utilisant la commande suivante :

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

Ensuite, utilisez la prompt suivante :

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

Si vous préférez la configuration manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à la plateforme ci-dessous :

Installer le package

npm install @capgo/capacitor-transitions

Enregistrer les composants web
```
import '@capgo/capacitor-transitions';
```

Envelopper les pages routées

<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>

Définir la direction avant que votre routeur change de route

import { setDirection } from '@capgo/capacitor-transitions/react';

setDirection('forward');
router.push('/message/42');

setDirection('back');
router.back();

Configuration 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

Importation de @capgo/capacitor-transitions/react inclut les déclarations de type JSX pour React, et cap-router-outlet, cap-page, cap-header, cap-content . Dans la plupart des projets React, cette importation rend les éléments personnalisés valides automatiquement dans TSX. cap-footerSi TypeScript continue à signaler des erreurs

If TypeScript still reports Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'ajoutez un fichier de déclaration de projet :

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

Pour Vite, Create React App et la plupart des applications React webpack, placer ce fichier à l'intérieur src/ suffit. Pour Next.js, placez-le dans src/ ou le répertoire racine du projet et assurez-vous que tsconfig.json l'inclut :

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

Pour les configurations TypeScript ou webpack personnalisées qui utilisent un dossier séparé types/ incluez ce dossier au lieu de

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

Glissez vers l'arrière

Activer ou désactiver le geste d'edge iOS à partir de la balise de 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>

Ou à partir de JavaScript :

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

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

auto active le geste uniquement lorsque Capacitor signale un runtime iOS natif. Lors de la réalisation du geste, la transition de page suit le doigt. Lorsque l'utilisateur relâche, la transition se termine et demande à l'historique du navigateur de revenir, ou annule et restaure la page actuelle.

Pour empêcher un élément de déclencher le geste, ajoutez data-swipe-gesture-ignore:

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

Utilisez @capgo/capacitor-transitions avec @capgo/native-navigation Lorsque native doit posséder les barres supérieure et inférieure tout en gardant la navigation web avec un mouvement Ionic.

Installez et synchronisez le package de navigation native :
Fenêtre de terminal
```
npm install @capgo/native-navigation
npx cap sync
```

Configurer le navigateur natif :

import { NativeNavigation } from '@capgo/native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
});

await NativeNavigation.setNavbar({
  title: 'Inbox',
  backButton: { visible: false },
});

Gardez l'entrée de transition web responsable uniquement des pages :

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

Faites fonctionner les deux systèmes à partir des mêmes événements de routeur :

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

N'affichez pas la barre supérieure native à nouveau comme un mouvement : <cap-header>. Gardez la barre native et utilisez @capgo/native-navigation pour le contenu de la page WebView en dessous. @capgo/capacitor-transitions Section intitulée « Composants »

Section intitulée « <cap-router-outlet> »

`<cap-router-outlet>`

Défaut	Description	Style d'animation	Défaut du plateau
`platform`	`'ios' \| 'android' \| 'auto'`	`'auto'`	__CAPGO_KEEP_0__
`duration`	`number`	__CAPGO_KEEP_1__	Durée d'animation en millisecondes
`keep-in-dom`	`boolean`	`true`	Conservation des pages inactives dans le DOM
`max-cached`	`number`	`10`	Nombre maximal de pages mises en cache
`swipe-gesture`	`boolean \| 'auto'`	`'auto'`	Activer, désactiver ou détecter nativement le geste de bordure iOS

Méthodes :

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

`<cap-page>`

Enveloppe une page et émet des événements de cycle de vie :

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

`<cap-content>`

Attribut	Type	Valeur par défaut	Description
`fullscreen`	`boolean`	`false`	Laisser le contenu défile derrière l'en-tête
`scroll-x`	`boolean`	`true`	Activer la navigation horizontale
`scroll-y`	`boolean`	`true`	Activer la navigation verticale

Aideurs de framework

Les points d'entrée du framework exposent les mêmes aidesurs de base :

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

Points d'entrée disponibles :

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

Continuer depuis Getting Started

Si vous utilisez Getting Started pour planifier la migration et les opérations d'entreprise, connectez-le avec En utilisant @capgo/capacitor-transitions pour la capacité native dans En utilisant @capgo/capacitor-transitions, Capgo Entreprise pour le flux de travail du produit dans Capgo Entreprise, Alternatives d'extension d'entreprise Ionic pour le flux de travail du produit dans Alternatives d'extension d'entreprise Ionic, Capgo Alternatives pour le flux de travail du produit dans Capgo Alternatives, et Consulting de Capgo pour le flux de travail du produit dans Consulting de Capgo.