Transitions plugin Capacitor

En utilisant @capgo/capacitor-transitions

@capgo/capacitor-transitions ajoute des transitions de route Ionic à vos applications Capacitor sans adopter l'interface utilisateur Ionic. Il fonctionne dans la couche web, conservez votre routeur existant et peut activer automatiquement un geste de retour par glissade sur l'édge uniquement à l'intérieur de la Capacitor natif iOS.

Installer

npm install @capgo/capacitor-transitions

Pas d'étape de synchronisation native car le package n'ajoute pas le plugin natif code.

Enregistrer les éléments

import '@capgo/capacitor-transitions';

Envelopper vos pages

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

Le connecter à un routeur

Définir la direction de transition avant votre mise à jour de route normale :

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

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

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

Exemple 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}>{/* routes */}</cap-router-outlet>;
}

export function InboxPage() {
  const navigate = useNavigate();
  const pageRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!pageRef.current) return;
    return setupPage(pageRef.current);
  }, []);

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

Le sous-chemin React inclut les déclarations de type JSX pour les éléments personnalisés. Si TypeScript signale toujours que cap-router-outlet n'existe pas sur JSX.IntrinsicElements, ajoutez ce fichier :

// src/capgo-transitions.d.ts
import '@capgo/capacitor-transitions/react';

Pour Vite, Create React App et la plupart des applications React webpack, garder ce fichier sous src/ est suffisant. Pour Next.js ou les configurations TypeScript personnalisées, assurez-vous qu'il est inclus par tsconfig.json:

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

Activer le recul par glissade

Utilisez swipe-gesture="auto" pour activer le geste uniquement lorsque Capacitor signale un runtime iOS natif :

<cap-router-outlet swipe-gesture="auto"></cap-router-outlet>

Vous pouvez également le forcer à partir de JavaScript :

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

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

Le geste suit le doigt pendant la transition, puis termine ou annule lorsque l'utilisateur libère. Ajoutez data-swipe-gesture-ignore Ne pas déclencher la gestuelle d'edge sur les boutons, les glissières ou les tiroirs.

Utilisez avec la navigation native

Installer @capgo/native-navigation Quand la couche native doit gérer le menu de navigation ou la barre d'onglets :

npm install @capgo/native-navigation
npx cap sync

Configurez le chrome natif, puis concentrez-vous sur les pages de la vue Web :

import { NativeNavigation } from '@capgo/native-navigation';
import { setDirection } from '@capgo/capacitor-transitions/react';
import { router } from './router';

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

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

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

Utilisez cap-content Pour les variables CSS de la page animée et de la navigation native pour les insets :

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

N'ajoutez pas la navbar native en tant que bandeau web en mouvement. @capgo/native-navigation garde la barre native ; @capgo/capacitor-transitions anime le contenu de la page sous elle.

Référence complète

• GitHub : https://github.com/Cap-go/capacitor-transitions/
• Documentation : /docs/plugins/transitions/

Continuez à partir de l'utilisation de @capgo/capacitor-transitions

Si vous utilisez L'utilisation de @capgo/capacitor-transitions pour planifier le comportement des médias et de l'interface native, connectez-l’avec @capgo/capacitor-transitions pour les détails d'implémentation dans @capgo/capacitor-transitions Getting Started pour les détails d'implémentation dans Démarrage L'utilisation de @capgo/capacitor-live-activités pour la capacité native dans l'utilisation de @capgo/capacitor-live-activités @capgo/capacitor-live-activités pour les détails d'implémentation dans @capgo/capacitor-live-activités, et Utilisez @capgo/capacitor-player vidéo natif pour la capacité native en Utilisez @capgo/capacitor-player vidéo natif.