Contexte : Page/area : Site de marketing Capgo. Rôle : Phrase de copie de site web. Voir dans : composant doc/SignupCta.astro, composant Hero.astro. Clé de message `hero_subtitle_v2` (Sous-titre de l'héros V2).

Installation

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil 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 :

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

Remarque

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

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

Configuration JSX TypeScript React

Importation de @capgo/capacitor-transitions/react includes les déclarations de types JSX pour cap-router-outlet, cap-page, cap-header, cap-content, and cap-footerDans la plupart des projets React, cette importation rend les éléments personnalisés valides automatiquement dans TSX.

Si TypeScript continue à signaler 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, placez ce fichier à l'intérieur src/ C'est suffisant. Pour Next.js, placez-le dans src/ suffit. Pour Next.js, mettez-le dans tsconfig.json includes le :

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

Pour les configurations TypeScript personnalisées ou webpack qui utilisent un séparateur types/ incluez ce dossier au lieu de celui-ci :

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

Retour à l'écran

Activer ou désactiver la pince de bord iOS à partir du 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 depuis JavaScript :

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.

To keep an element from starting the gesture, add data-swipe-gesture-ignore:

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

Avec Navigation Native

Use @capgo/capacitor-transitions avec @capgo/native-navigation Lorsque native doit contrôler les barres de haut et de bas, le contenu web conserve la navigation Ionic.

1. Installez et synchronisez le package de navigation native :

   npm install @capgo/native-navigation
   npx cap sync

2. Configureur de 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 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);
   }

4. Gérer les deux systèmes à partir des mêmes événements du 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 native en haut 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	Default	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	Pages maximales en cache
swipe-gesture	boolean | 'auto'	'auto'	Activer, désactiver ou détecter nativement le geste d'edge iOS

Méthodes :

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

<cap-page>

Émet des événements de cycle de vie pour une page unique.

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

<cap-content>

Attribut	Type	Par défaut	Description
fullscreen	boolean	false	Laissez 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 aides 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à 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 En utilisant @capgo/capacitor-transitions, Capgo Entreprise pour le flux de travail du produit dans Capgo Enterprise, Alternatives de plugins Ionic Enterprise Pour le flux de travail du produit dans les alternatives du plugin Enterprise Ionic. Capgo Alternatives pour le flux de travail du produit dans Capgo Alternatives, et Capgo Conseil pour le flux de travail du produit dans Capgo Consulting.