Transitions

Utiliser @capgo/capacitor-transitions

@capgo/capacitor-transitions Ajoute des transitions de route de style Ionic aux 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 swipe arrière sur l'édge uniquement à l'intérieur de l'Capacitor iOS natif.

Installer

npm install @capgo/capacitor-transitions

Il n'y a pas d'étape de synchronisation native car le package ne rajoute pas de plugin code natif.

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 la mise à jour normale de la route :

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 types 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 retour en arrière par geste

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 depuis 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 sur les boutons, les curseurs ou les tiroirs qui ne doivent pas déclencher le geste de bord.

Utilisez avec la navigation native

Installer @capgo/native-navigation Configurez la couche native pour qu'elle gère le menu de navigation ou la barre d'outils :

npm install @capgo/native-navigation
npx cap sync

Configurez le chrome natif, puis concentrez-vous sur les transitions des pages WebView :

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 le corps de page animé et les variables CSS de 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 barre de navigation native en tant que tête de page web en mouvement. @capgo/native-navigation garde la barre native ; @capgo/capacitor-transitions animez le contenu de la page en dessous.

Référence complète

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

Continuez d'où vous en étiez avec l'utilisation de @capgo/capacitor-transitions

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