Getting Started

1. Installieren Sie das Paket

   npm install @capgo/capacitor-transitions

2. Registrieren Sie die Web-Komponenten

   import '@capgo/capacitor-transitions';

3. Routete 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. Legen Sie die Richtung fest, bevor sich Ihre 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 in der Web-Schicht Ihrer Capacitor-Anwendung.

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 eine Projektdeklarationsdatei hinzu:

src/capgo-transitions.d.ts

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

Für Vite, Create React App und die meisten webpack-React-Anwendungen ist es ausreichend, diese Datei in src/ zu platzieren. Für Next.js legen Sie sie in src/ oder das Projekt-Verzeichnis und stelle sicher tsconfig.json enthält es:

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

Für benutzerdefinierte TypeScript- oder Webpack-Einstellungen, die ein separates types/ Verzeichnis verwenden, fügen Sie stattdessen das Verzeichnis ein:

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

Rückwärts scrollen

Aktivieren oder deaktivieren Sie die iOS-Randgeste von 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>

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 Seiteübergabe der Fingerbewegung. Wenn der Benutzer loslässt, beendet die Übergabe sich 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. Konfigurieren Sie native Chrome:

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

3. Halten Sie die Web-Übergangsausgabe für Seiten nur verantwortlich:

   <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. Führen Sie beide Systeme von den gleichen Router-Ereignissen aus:

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

Rendern Sie die native Top-Leiste nicht erneut als bewegliche <cap-header>. Lassen @capgo/native-navigation die native Leiste und verwenden Sie @capgo/capacitor-transitions für die Unterseite der WebView-Seite darunter.

Komponenten

<cap-router-outlet>

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

Methode(n):

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

<cap-page>

Umhüllt eine Seite und sendet Lebenszyklusereignisse:

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

<cap-content>

Eigenschaft	Typ	Standard	Beschreibung
fullscreen	boolean	false	Erstreckt sich der Inhalt hinter dem Header
scroll-x	boolean	true	Horizontaler Scrollbetrieb aktivieren
scroll-y	boolean	true	Vertikaler Scrollbetrieb aktivieren

Hilfsmittel für Frameworks

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 verwenden Getting Started um die Migration und die Unternehmensoperationen zu planen, 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.