Transisi

Menggunakan @capgo/capacitor-transisi

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

Pasang

npm install @capgo/capacitor-transitions

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

Daftar elemen

import '@capgo/capacitor-transitions';

Bungkus 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

Tetapkan arah transisi sebelum update jalur 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 di 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/ adalah cukup. Untuk Next.js atau pengaturan TypeScript kustom, pastikan termasuk oleh tsconfig.json:

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

Mengaktifkan swipe back

Pakai swipe-gesture="auto" untuk mengaktifkan gerakan hanya ketika Capacitor melaporkan runtime iOS native:

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

Anda juga dapat memaksa dari JavaScript:

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

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

Gerakan mengikuti jari selama transisi, kemudian menyelesaikan atau membatalkan ketika pengguna melepaskan. Tambahkan data-swipe-gesture-ignore pada tombol, slider, atau drawer yang tidak ingin memulai gerakan edge.

Gunakan dengan navigasi asli

Pasang @capgo/native-navigation ketika lapisan asli harus mengambil navbar atau tabbar:

npm install @capgo/native-navigation
npx cap sync

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

Gunakan cap-content untuk tubuh halaman 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);
}

Jangan duplikat navbar asli sebagai header web yang bergerak. @capgo/native-navigation menggunakan bar asli; @capgo/capacitor-transitions animasi 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 media asli dan perilaku antarmuka, hubungkannya dengan @capgo/capacitor-transisi untuk detail implementasi di @capgo/capacitor-transisi, Mengawali untuk detail implementasi di Mengawali, Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan asli di Menggunakan @capgo/capacitor-aktivitas-hidup @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-live-activities, dan Menggunakan @capgo/capacitor-video-player untuk kemampuan asli di Menggunakan @capgo/capacitor-video-player.