Transitions

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 sur l'arrière de l'écran iOS uniquement à l'intérieur de la Capacitor native iOS.

Installez

npm install @capgo/capacitor-transitions

Il n'y a pas d'étape de synchronisation native car le package ne rajoute pas de plugin native 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 la mise à jour de votre 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 types JSX pour les éléments personnalisés. Si TypeScript vous signale encore 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

Utiliser swipe-gesture="auto" pour activer la gestuelle uniquement lorsque Capacitor signale un runtime natif iOS :

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

La gestuelle suit le doigt pendant la transition, puis complète ou annule lorsque l'utilisateur libère. Ajoutez data-swipe-gesture-ignore sur les boutons, les glissières ou les tiroirs qui ne doivent pas déclencher la gestuelle de bord.

Utilisez avec la navigation native

Installez @capgo/native-navigation lorsque la couche native doit posséder le navbar ou le tabbar :

npm install @capgo/native-navigation
npx cap sync

Configurez le chrome natif, puis maintenez les transitions centrées sur les 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 navbar native en tant que tête 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 natifs, connectez-l’avec @capgo/capacitor-transitions pour les détails d'implémentation dans @capgo/capacitor-transitions Prise en main pour le détail d'implémentation dans Getting Started, En utilisant @capgo/capacitor-activités-en-vive pour la capacité native dans En utilisant @capgo/capacitor-activités-en-vive, @capgo/capacitor-activités-en-vive pour le détail d'implémentation dans @capgo/capacitor-activités-en-vive, et En utilisant @capgo/capacitor-joueur-de-videos pour la capacité native dans En utilisant @capgo/capacitor-joueur-de-videos.