Transisi

Menggunakan @capgo/capacitor-transisi

@capgo/capacitor-transitions menambahkan transisi jalur Ionic ke aplikasi Capacitor tanpa menerima UI Ionic. Ini berjalan di lapisan web, menjaga router yang ada, dan dapat mengaktifkan secara otomatis gestur gesek ke kiri di iOS hanya di dalam Capacitor iOS.

Install

npm install @capgo/capacitor-transitions

Tidak ada langkah sinkron native karena paket tidak menambahkan plugin native code.

Daftarkan elemen-elemen tersebut

import '@capgo/capacitor-transitions';

Selubungi halaman Anda

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

Hubungkan ke router

Set arah transisi sebelum Anda memperbarui rute normal:

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

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

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

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

Subpath React termasuk tipe JSX untuk elemen kustom. Jika TypeScript masih melaporkan bahwa cap-router-outlet tidak ada pada JSX.IntrinsicElements, tambahkan file ini:

// src/capgo-transitions.d.ts
import '@capgo/capacitor-transitions/react';

Untuk Vite, Create React App, dan sebagian besar aplikasi React webpack, menjaga file tersebut di src/ cukup. Untuk Next.js atau pengaturan TypeScript kustom, pastikan termasuk oleh tsconfig.json:

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

Aktifkan swipe back

Pakai swipe-gesture="auto" Mengaktifkan gesturanya hanya ketika Capacitor melaporkan runtime iOS native:

<cap-router-outlet swipe-gesture="auto"></cap-router-outlet>

Kamu juga bisa mengaktifkannya dari JavaScript:

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

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

Gestur mengikuti jari selama transisi, kemudian menyelesaikan atau membatalkan ketika pengguna melepaskannya. Tambahkan data-swipe-gesture-ignore Pada tombol, slider, atau drawer yang tidak boleh memulai gestur edge.

Pakai bersama navigasi native

Instal @capgo/native-navigation Mengaktifkan layer native untuk mengambil navbar atau tabbar:

npm install @capgo/native-navigation
npx cap sync

Konfigurasi chrome native, kemudian fokuskan transisi pada halaman 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' },
  });
}

Pakai cap-content Untuk tubuh halaman yang di animasi dan variabel CSS native-navigasi untuk 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);
}

Tidak duplikasi navbar native sebagai header web yang bergerak. @capgo/native-navigation Mengaktifkan bar native; @capgo/capacitor-transitions Menggerakkan konten halaman di bawahnya.

Referensi Lengkap

• GitHub: https://github.com/Cap-go/capacitor-transisi/
• Dokumen: /docs/plugins/transisi/

Teruskan dari Menggunakan @capgo/capacitor-transisi

Jika Anda menggunakan Menggunakan @capgo/capacitor-transisi untuk merencanakan perilaku media dan antarmuka asli, hubungkannya dengan @capgo/capacitor-transisi untuk detail implementasi di @capgo/capacitor-transisi, Membuat Mulai For detail implementasi di Getting Started, Menggunakan @capgo/capacitor-live-aktivitas For kemampuan asli di Menggunakan @capgo/capacitor-live-aktivitas, @capgo/capacitor-live-aktivitas For detail implementasi di @capgo/capacitor-live-aktivitas, dan Menggunakan @capgo/capacitor-player-video For kemampuan asli di Menggunakan @capgo/capacitor-player-video.