Page/area: Capgo Marketing-Website. Role: Website-Textzeile. Seen in: Komponente doc/SignupCta.astro, Komponente Hero.astro. Message key `hero_subtitle_v2` (Hero Untertitel V2).

Installation

Sie können unser AI-gestütztes Setup verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten zu Ihrem KI-Tool hinzu, indem Sie folgenden Befehl ausführen:

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

Verwenden Sie dann die folgende Anleitung:

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

Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und die unten angegebenen Plattform-spezifischen Anweisungen befolgen:

1. Paket installieren

   npm install @capgo/capacitor-transitions

2. Registrieren Sie die Web-Komponenten

   import '@capgo/capacitor-transitions';

3. Routete Seiten einhüllen

   <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. Stellen Sie die Richtung vor, wenn Ihr Router die Route ändert.

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

Hinweis

Es gibt keinen nativen Synchronisierungsstep für dieses Paket. Es läuft in der Web-Schicht Ihres Capacitor Apps.

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-contentund cap-footerIn den meisten React-Projekten macht diese Importierung die benutzerdefinierten Elemente in TSX automatisch gültig.

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

src/capgo-Übergänge.d.ts

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

Für Vite, Create React App und die meisten webpack-React-Anwendungen legen Sie das Datei innerhalb src/ Es reicht. Für Next.js legen Sie es hinein. src/ zu platzieren. Für Next.js legen Sie sie in tsconfig.json einschließen es:

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

Für benutzerdefinierte TypeScript- oder Webpack-Konfigurationen, die eine separate types/ Ordner, fügen Sie diesen Ordner stattdessen ein:

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

Rückwärts-Wischen

Enablen oder deaktivieren Sie die iOS-Kante-Geste 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>

Von JavaScript aus:

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

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

auto enables the gesture only when Capacitor reports a native iOS runtime. During the gesture, the page transition follows the finger. When the user releases, the transition either completes and asks the browser history to go back, or cancels and restores the current page.

Zum Verhindern, dass ein Element die Geste startet, fügen Sie data-swipe-gesture-ignore:

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

Mit nativer Navigation

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

1. Installieren und synchronisieren Sie das native-Navigationspaket:

   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. Bleiben Sie die Web-Übergangsausgabe für Seiten 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 derselben Router-Ereignisse 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' },
     });
   }

Vermeiden Sie die Wiedergabe der nativen oberen Leiste als beweglich <cap-header>Lassen Sie @capgo/native-navigation die Leiste native und verwenden Sie @capgo/capacitor-transitions für die WebView-Seitenergebnisse darunter.

Komponenten

<cap-router-outlet>

Typ	Standard	Beschreibung	Animationsschablone
platform	'ios' | 'android' | 'auto'	'auto'	Animationsschwerpunkt
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-Randgeste ermöglichen, 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>

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

Framework-Hilfsfunktionen

Die Framework-Eintrittspunkte offenbaren die gleichen Kernhilfsfunktionen:

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

Weitergehen von Getting Started

Wenn Sie Capgo verwenden Getting Started um die Migration und die Betriebsabläufe zu planen und 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 Beratung für den Produktworkflow in Capgo Consulting