Interface d'accueil

Copier un prompt de configuration avec les étapes d'installation et le 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.

Installez 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éfinissez l'orientation avant que votre routeur ne 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 à partir de @capgo/capacitor-transitions/react inclut les déclarations de type JSX pour cap-router-outlet, cap-page, cap-header, cap-content, et cap-footer. Dans la plupart des projets React, cette importation rend les éléments personnalisés valides automatiquement dans TSX.

Si TypeScript signale toujours 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/ est suffisant. Pour Next.js, placez-le dans src/ ou le répertoire racine et assurez-vous que tsconfig.json le contient :

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

Pour les configurations TypeScript ou webpack personnalisées qui utilisent un dossier séparé, incluez ce dossier à la place : types/ Copier dans le presse-papiers

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

Titre de la section “Retour en arrière”

Copier dans le presse-papiers

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

Copier dans le presse-papiers

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

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

auto enables the gesture only when Capacitor reports a native iOS runtime. During the gesture, the page transition follows the finger. When the user releases, the transition either completes and asks the browser history to go back, or cancels and restores the current page.

Copier dans le presse-papiers data-swipe-gesture-ignore:

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

Utiliser @capgo/capacitor-transitions avec @capgo/native-navigation lorsque la navigation native doit gérer les barres supérieure et inférieure tandis que le contenu web conserve la motion de page Ionic.

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

Configurer le chrome natif :

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

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

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

Gardez la sortie de transition web responsable des pages uniquement :

<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 élément en mouvement. <cap-header>Laissez la barre native et utilisez @capgo/native-navigation pour le contenu de la page WebView en dessous. @capgo/capacitor-transitions Composants

Section intitulée “Composants”

`<cap-router-outlet>`

Type	Copier dans le presse-papier	Par défaut	Description
`platform`	`'ios' \| 'android' \| 'auto'`	`'auto'`	Style d'animation
`duration`	`number`	Par défaut du plateforme	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 la gestuelle d'edge sur 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	Par défaut	Description
`fullscreen`	`boolean`	`false`	Laisser le contenu défile derrière l'en-tête
`scroll-x`	`boolean`	`true`	Activer la défilement horizontal
`scroll-y`	`boolean`	`true`	Activer la défilement vertical

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

Continuez de l'interface d'accueil

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