Getting Started

1. Das Paket installieren

   npm install @capgo/capacitor-transitions

2. Registriere die Web-Komponenten

   import '@capgo/capacitor-transitions';

3. Geschachtelte geroutete Seiten einbetten

   <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. Legte die Richtung fest, bevor sich deine Router-Route ändert

   import { setDirection } from '@capgo/capacitor-transitions/react';
   
   setDirection('forward');
   router.push('/message/42');
   
   setDirection('back');
   router.back();

Hinweis

Für dieses Paket gibt es keine native Synchronisierungsstep. Es läuft im Weblayer deiner Capacitor-App.

React-Einrichtung

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

Importieren von @capgo/capacitor-transitions/react enthält JSX-Typen für cap-router-outlet, cap-page, cap-header, cap-content, und cap-footer. In den meisten React-Projekten macht diese Importierung die benutzerdefinierten Elemente in TSX automatisch gültig.

Wenn TypeScript immer noch Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements', meldet, fügen Sie ein Projektdeklarationsdatei hinzu:

src/capgo-transitions.d.ts

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

Für Vite, Create React App und die meisten webpack-React-Anwendungen reicht es aus, das File in src/ in oder die Projekt-Root und stelle sicher, dass src/ einschließt: tsconfig.json Zwischenablage kopieren

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

Verzeichnis verwenden, füge stattdessen das Verzeichnis ein: types/ Zwischenablage kopieren

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

Abschnitt mit dem Titel “Rückwärts scrollen”

Zwischenablage kopieren

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

Oder von JavaScript:

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

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

auto ermöglicht die Geste nur, wenn Capacitor eine native iOS-Umgebung meldet. Während der Geste folgt die Seitenübergabe der Fingerbewegung. Wenn der Benutzer loslässt, vollendet die Übergabe und fragt das Browser-Historik nach, zurückzugehen, oder storniert sie und restauriert die aktuelle Seite.

Um ein Element davon abzuhalten, die Geste auszulösen, fügen Sie data-swipe-gesture-ignore:

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

Mit Native Navigation

Verwenden @capgo/capacitor-transitions mit @capgo/native-navigation wenn native die oberen und unteren Leisten besitzen soll, während das Webinhalte Ionic-Style-Seitenbewegungen beibehält.

1. Installieren und synchronisieren Sie das Paket für native Navigation:

   npm install @capgo/native-navigation
   npx cap sync

2. Natives Chrome konfigurieren:

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

3. __CAPGO_KEEP_0__ die Web-Übergangsausgabe für Seiten nur verantwortlich lassen:

   <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. Beide Systeme von denselben Router-Ereignissen steuern:

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

Erstelle den nativen oberen Balken nicht erneut als beweglich. Lass ihn nativ und verwende ihn für die Unterseite der WebView-Seite. <cap-header>Lass den nativen oberen Balken nativ und verwende ihn für die Unterseite der WebView-Seite. @capgo/native-navigation Verwende den nativen oberen Balken als nativen oberen Balken und verwende ihn für die Unterseite der WebView-Seite. @capgo/capacitor-transitions Verwende den nativen oberen Balken als nativen oberen Balken und verwende ihn für die Unterseite der WebView-Seite.

Komponenten

<cap-router-outlet>

Attribut	Typ	Standardwert	Beschreibung
platform	'ios' | 'android' | 'auto'	'auto'	Animationsschablone
duration	number	Plattformstandard	Animationdauer in Millisekunden
keep-in-dom	boolean	true	Inaktive Seiten im DOM behalten
max-cached	number	10	Maximale Anzahl an gecacheten Seiten
swipe-gesture	boolean | 'auto'	'auto'	iOS-Randgesten aktivieren, deaktivieren oder automatisch erkennen

Methode:

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

<cap-page>

Ermöglicht die Verwendung einer einzelnen Seite und emittiert Lebenszyklusereignisse:

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

<cap-content>

Attribut	Typ	Standard	Beschreibung
fullscreen	boolean	false	Lassen Sie den Inhalt hinter dem Header scrollen
scroll-x	boolean	true	Horizontaler Scrollen aktivieren
scroll-y	boolean	true	Vertikaler Scrollen aktivieren

Framework-Hilfsfunktionen

Die Framework-Eintrittspunkte offenbaren die gleichen Kernhilfen:

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

Verfügbare Eintrittspunkte:

• @capgo/capacitor-transitions/react
• @capgo/capacitor-transitions/vue
• @capgo/capacitor-transitions/angular
• @capgo/capacitor-transitions/svelte
• @capgo/capacitor-transitions/solid

Weitermachen von Getting Started

Wenn Sie " Getting Started " zur Planung der Migration und Unternehmensoperationen verwenden, verbinden Sie es mit Mit @capgo/capacitor-Übergängen für die native Fähigkeit in Mit @capgo/capacitor-Übergängen Capgo Enterprise für den Produktworkflow in Capgo Enterprise, Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen, Capgo Alternativen für den Produktworkflow in Capgo Alternativen, und Capgo Consulting für den Produktworkflow in Capgo Consulting.