Einstieg

GitHub

Kopieren Sie einen Einrichtungshinweis mit den Installationsanweisungen und der vollständigen Markdown-Dokumentation für diesen Plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-transitions`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/transitions/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Installation

You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Zur Zwischenablage kopieren

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-transitions` plugin in my project.

Wenn Sie eine manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und folgen Sie den plattform-spezifischen Anweisungen unten:

Installieren Sie das Paket

npm install @capgo/capacitor-transitions

Registrieren Sie die Web-Komponenten
```
import '@capgo/capacitor-transitions';
```

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

Legen Sie die Richtung fest, bevor sich Ihr Router die Route ändert

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

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

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

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:

targetLanguage":"Deutsch","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["src/capgo-transitions.d.ts","In die Zwischenablage kopieren","Für Vite, Create React App und die meisten webpack-React-Anwendungen reicht es aus, das Datei in","ist genug. Für Next.js legen Sie sie in","oder den Projektroot und stellen sicher, dass","es enthält:","In die Zwischenablage kopieren","Für benutzerdefinierte TypeScript- oder webpack-Einstellungen, die ein separates","Ordner verwenden, fügen Sie stattdessen diesen Ordner ein:","In die Zwischenablage kopieren","Zurück blasen","Abschnitt mit dem Titel “Zurück blasen”"]}

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

targetLanguage src/ protectedTokens src/ texts tsconfig.json In die Zwischenablage kopieren

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

ist genug. Für Next.js legen Sie sie in types/ oder den Projektroot und stellen sicher, dass

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

In die Zwischenablage kopieren

Enable oder deaktivieren Sie die iOS-Eckgeste aus 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 aus JavaScript:

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

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

auto aktiviert die Geste nur, wenn Capacitor eine native iOS-Runtime meldet. Während der Geste folgt die Seiteübergang dem Finger. Wenn der Benutzer loslässt, vollendet der Übergang und fragt die Browserhistorie nach, zurückzugehen, oder storniert und die aktuelle Seite wiederherstellt.

Um ein Element davon abzuhalten, die Geste zu starten, fügen Sie data-swipe-gesture-ignore:

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

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

Installieren und synchronisieren Sie das native Navigationspaket:
Terminalfenster
```
npm install @capgo/native-navigation
npx cap sync
```

Konfigurieren Sie das native Chrome:

import { NativeNavigation } from '@capgo/native-navigation';

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

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

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

Steueren Sie beide Systeme von denselben Routerereignissen 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 beweglich: <cap-header>. @capgo/native-navigation Halten Sie die Bar native und verwenden Sie @capgo/capacitor-transitions für die WebView-Seitenelemente darunter.

Komponenten

`<cap-router-outlet>`

Attribut	Typ	Standardwert	Beschreibung
`platform`	`'ios' \| 'android' \| 'auto'`	`'auto'`	Animationsschablone
`duration`	`number`	Plattformstandard	Animationsdauer in Millisekunden
`keep-in-dom`	`boolean`	`true`	Verwalte inaktive Seiten im DOM
`max-cached`	`number`	`10`	Höchstwert der gecacheten Seiten
`swipe-gesture`	`boolean \| 'auto'`	`'auto'`	Aktiviere, deaktiviere oder erkennen Sie den iOS-Randgestus

Methode:

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

`<cap-page>`

Umfasst eine Seite und sendet Lebenszyklusereignisse aus:

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

`<cap-content>`

Attribut	Typ	Standard	Beschreibung
`fullscreen`	`boolean`	`false`	Lasst den Inhalt hinter dem Header scrollen
`scroll-x`	`boolean`	`true`	Enable horizontal scrolling
`scroll-y`	`boolean`	`true`	Enable vertikale Scrollen

Framework-Hilfen

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