Transisi

Menggunakan @capgo/capacitor-transisi

@capgo/capacitor-transitions menambahkan transisi jalur Ionic ke aplikasi Capacitor tanpa mengadopsi antarmuka Ionic. Ini berjalan di lapisan web, menjaga router yang sudah ada, dan dapat mengaktifkan secara otomatis gerakan geser balik iOS di tepi hanya di dalam Capacitor iOS native.

Instal

npm install @capgo/capacitor-transitions

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

Daftarkan elemen-elemen

import '@capgo/capacitor-transitions';

Selubungi halaman-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-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 bawah src/ adalah cukup. Untuk Next.js atau pengaturan TypeScript kustom, pastikan termasuk dengan tsconfig.json:

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

aktifkan swipe kembali

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

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

Mungkin Anda juga ingin mengaktifkannya secara paksa dari JavaScript:

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

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

Gerakan ini mengikuti jari selama transisi, kemudian menyelesaikan atau membatalkan ketika pengguna melepaskannya. Tambahkan data-swipe-gesture-ignore ke tombol, slider, atau drawer yang tidak boleh memulai gerakan edge.

Pilih untuk digunakan bersama navigasi native

Instal @capgo/native-navigation ketika layer native harus mengontrol 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' },
  });
}

Pilih cap-content untuk tubuh halaman yang dianimasi dan variabel CSS navigasi native 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 native sebagai header web yang bergerak. @capgo/native-navigation menggunakan bar native; @capgo/capacitor-transitions animasi konten halaman di bawahnya.

Referensi Lengkap

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

Lanjutkan dari Menggunakan @capgo/capacitor-transisi

Jika Anda menggunakan Menggunakan @capgo/capacitor-transisi untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan @capgo/capacitor-transisi untuk detail implementasi di @capgo/capacitor-transisi, Mulai untuk detail implementasi di Mulai, Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan asli di Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup, dan Menggunakan @capgo/capacitor-pemain-video untuk kemampuan asli di Menggunakan @capgo/capacitor-pemain-video.