@capgo/capacitor-transisi

Tambahkan transisi rute yang terasa alami dan gesekan balik iOS opsional ke aplikasi Capacitor tanpa menerima UI Ionic.

Mulai GitHub

Gerakan Ionic-style

Gunakan animasi rute iOS dan Android yang diinspirasi oleh pola navigasi ponsel tanpa mengirimkan komponen Ionic.

Balik gesek

Aktifkan gesekan iOS di tepi yang mengikuti jari dan dapat mengaktifkan otomatis hanya di dalam Capacitor iOS native.

Tidak bergantung pada framework

Gunakan komponen web secara langsung atau bantuan untuk React, Vue, Angular, Svelte, dan Solid.

Tidak ada penguncian UI

Bawa toolbar, konten, footer, dan router sendiri sementara perpustakaan mengkoordinasikan lapisan transisi.

When Untuk Menggunakannya

@capgo/capacitor-transitions digunakan untuk aplikasi yang ingin memiliki gerakan halaman berkualitas seperti Ionic tanpa menerima sistem komponen Ionic. Ini menjaga navigasi di dalam router web yang sudah ada dan menganimasikan elemen halaman di dalam Capacitor WebView.

Pakai saat kamu membutuhkan:

transisi navigasi push, pop, dan root yang terasa dekat dengan konvensi platform
gerakan header, konten, dan footer yang koordinat
penyimpanan halaman untuk navigasi mundur cepat
gerakan swipe-back iOS dengan pilihan yang mengikuti jari pengguna
bantuan pengaturan spesifik framework tanpa router spesifik framework

Inti API

<cap-router-outlet> mengendalikan stack rute animasi.
<cap-page> mengelilingi setiap halaman.
<cap-header>, <cap-content>, dan <cap-footer> mengidentifikasi wilayah yang harus bergerak bersama.
initTransitions(options?) inisialisasi ikatan framework.
setDirection('forward' | 'back' | 'root' | 'none') menginformasikan router update berikutnya untuk menjalankan animasi mana.
setupRouterOutlet(element, options?) menghubungkan outlet ke perilaku siklus hidup dan gestur.
setupPage(element, callbacks?) mendaftarkan panggilan kembali siklus halaman.

Model Platform

platform="auto" memilih profil animasi iOS atau Android dari lingkungan waktu eksekusi. Anda dapat memaksa platform="ios" atau platform="android" ketika melakukan tes.

swipe-gesture="auto" menggunakan bantuan runtime Capacitor dan mengaktifkan gerakan tepi hanya di aplikasi iOS Capacitor asli. Gunakan true untuk memaksanya atau false untuk menonaktifkannya.

Gerakan ini diimplementasikan di layer web. Dirancang untuk terasa seperti transisi balik gesekan iOS Ionic dengan menggerakkan progress animasi dari posisi pointer, kemudian menyelesaikan atau membatalkan berdasarkan jarak dan kecepatan.