Mulai Menggunakan Transisi

Pemasangan

Anda dapat menggunakan Setup Bantuan AI kami untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:

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

Kemudian gunakan prompt berikut:

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

Jika Anda lebih suka Setup Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah:

1. Install the package

   npm install @capgo/capacitor-transitions

2. Mendaftarkan komponen web

   import '@capgo/capacitor-transitions';

3. Penyamaran halaman yang diarahkan

   <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. Set arah sebelum perubahan jalur router

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

Catatan

Tidak ada langkah sinkronisasi asli untuk paket ini. Ini berjalan di lapisan web aplikasi Capacitor Anda.

Konfigurasi 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}>
      {/* 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

Mengimport dari @capgo/capacitor-transitions/react includes tipe-tipe JSX untuk cap-router-outlet, cap-page, cap-header, cap-content, and cap-footerDalam kebanyakan proyek React, import tersebut membuat elemen kustom tersebut valid secara otomatis di TSX.

If TypeScript masih melaporkan masalah Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'Tambahkan file deklarasi proyek:

src/capgo-transisi.d.ts

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

Untuk Vite, Create React App, dan sebagian besar aplikasi React webpack, menempatkan file tersebut di dalam src/ adalah cukup. Untuk Next.js, letakkan di src/ atau root proyek dan pastikan tsconfig.json mengandungnya:

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

Untuk pengaturan TypeScript atau webpack yang menggunakan konfigurasi terpisah types/ folder, include that folder instead:

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

Swipe Back

Mengaktifkan atau menonaktifkan gestur tepi iOS dari 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>

atau dari JavaScript:

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

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

auto mengaktifkan gestur hanya ketika Capacitor melaporkan runtime iOS asli. Selama gestur, transisi halaman mengikuti jari. Ketika pengguna melepaskan, transisi tersebut akan menyelesaikan dan meminta browser sejarah untuk kembali, atau membatalkan dan memulihkan halaman saat ini.

Untuk mencegah elemen dari memulai gestur, tambahkan data-swipe-gesture-ignore:

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

Dengan Navigasi Asli

Pilih @capgo/capacitor-transitions dengan @capgo/native-navigation ketika native harus menguasai bar atas dan bawah sementara konten web menjaga gerakan halaman Ionik.

1. Install dan sinkronkan paket navigasi native:

   npm install @capgo/native-navigation
   npx cap sync

2. Konfigurasi chrome native:

   import { NativeNavigation } from '@capgo/native-navigation';
   
   await NativeNavigation.configure({
     contentInsetMode: 'css',
   });
   
   await NativeNavigation.setNavbar({
     title: 'Inbox',
     backButton: { visible: false },
   });

3. Tetapkan outlet transisi web bertanggung jawab untuk halaman hanya:

   <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. Menggerakkan kedua sistem dari perangkat router yang sama:

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

Jangan menampilkan bar atas native lagi sebagai gerakan <cap-header>. Biarkan @capgo/native-navigation bar native dan gunakan @capgo/capacitor-transitions untuk konten halaman WebView di bawahnya.

Komponen

<cap-router-outlet>

Sifat	Jenis	Deskripsi	Gaya animasi
platform	'ios' | 'android' | 'auto'	'auto'	Gaya Animasi
duration	number	Platform bawaan	Durasi animasi dalam milisecond
keep-in-dom	boolean	true	Tahan halaman tidak aktif di DOM
max-cached	number	10	Maksimum halaman yang disimpan
swipe-gesture	boolean | 'auto'	'auto'	Aktifkan, matikan, atau mendeteksi secara native gerakan tepi iOS

Metode:

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

<cap-page>

Mengapit satu halaman dan mengeluarkan peristiwa siklus:

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

<cap-content>

Atribut	Jenis	Default	Deskripsi
fullscreen	boolean	false	Biarkan konten bergeser di balik header
scroll-x	boolean	true	Aktifkan pergeseran horizontal
scroll-y	boolean	true	Aktifkan pergeseran vertikal

Bantuan Framework

Masuknya framework menampilkan helper inti yang sama:

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

Poin masuk yang tersedia:

• @capgo/capacitor-transitions/react
• @capgo/capacitor-transitions/vue
• @capgo/capacitor-transitions/angular
• @capgo/capacitor-transitions/svelte
• @capgo/capacitor-transitions/solid

Masuknya yang tersedia:

Bab yang berjudul “Teruskan dari Mulai” Mulai Berjalan untuk merencanakan migrasi dan operasi bisnis, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan asli dalam Menggunakan @capgo/capacitor-transisi, Capgo Enterprise untuk alur kerja produk di Capgo Enterprise, Alternatif Plugin Ionic Enterprise Untuk alur kerja produk dalam Ionic Enterprise Plugin Alternatif, Alternatif Capgo untuk aliran kerja produk di Capgo Alternatif, dan Konsultasi Capgo untuk alur kerja produk di Capgo Konsultasi.