Démarrage

Installation

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

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

Utilisez ensuite 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 :

1. Installer le package

   npm install @capgo/capacitor-transitions

2. Enregistrer les composants web

   import '@capgo/capacitor-transitions';

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

4. 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();

Note

Il n'y a pas d'étape de synchronisation native pour ce package. Il fonctionne dans la couche web de votre application Capacitor.

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 depuis @capgo/capacitor-transitions/react inclut les déclarations de type JSX pour cap-router-outlet, cap-page, cap-header, cap-contentet cap-footer. Dans la plupart des projets React, cette importation rend les éléments personnalisés valides automatiquement dans TSX.

Si TypeScript signale toujours des erreurs : Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'Ajoutez un fichier de déclaration de projet :

src/capgo-transitions.d.ts

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

Pour Vite, Create React App et la plupart des applications React webpack, placer ce fichier à l'intérieur de src/ est suffisant. Pour Next.js, placez-le dans src/ ou la 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é, incluez ce dossier à la place : types/ protectedTokens

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

Retourner par geste

Activer ou désactiver le geste d'edge iOS à partir de la balise :

<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 natif iOS. Pendant le geste, la transition de page suit le doigt. Lorsque l'utilisateur libère, 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émarrer le geste, ajoutez data-swipe-gesture-ignore:

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

Avec Navigation Native

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

1. Installez et synchronisez le package de navigation native :

   npm install @capgo/native-navigation
   npx cap sync

2. Configurez le chrome natif :

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

3. Gardez l'ouverture 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);
   }

4. 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 @capgo/native-navigation garder la barre native et utilisez @capgo/capacitor-transitions pour le contenu de la page WebView en dessous d'elle.

Composants

<cap-router-outlet>

Attribut	Type	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	Conserve les 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 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>

Type	context	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 Prise en main pour planifier la migration et les opérations d'entreprise, connectez-l’avec En utilisant @capgo/capacitor-transitions pour la capacité native en utilisant @capgo/capacitor-transitions, Capgo Entreprise pour le flux de travail du produit dans Capgo Entreprise, Alternatives Ionic Entreprise Plugin pour le flux de travail du produit dans Alternatives Ionic Entreprise Plugin, Capgo Alternatives pour le flux de travail du produit dans Capgo Alternatives, et Capgo Consulting pour le flux de workflow du produit dans Capgo Consulting.