@capgo/capacitor-transisi

Gerakan Ionic-style

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

Balikkan dengan Gesekan

Aktifkan gesekan tepi iOS yang mengikuti jari dan dapat secara otomatis diaktifkan hanya di dalam Capacitor iOS asli.

Tidak Terikat dengan Antarmuka

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

Tidak Ada Blokir Antarmuka

Gunakan toolbar, konten, footer, dan router milik Anda sendiri, sementara perpustakaan mengkoordinasikan lapisan transisi.

When To Use It

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

Pakai ketika Anda membutuhkan:

• transisi rute push, pop, dan root yang terasa dekat dengan konvensi platform
• gerakan kepala, konten, dan footer yang dikordinasikan
• penyimpanan halaman untuk navigasi mundur cepat
• gestur swipe-back iOS opsional yang mengikuti jari pengguna
• bantuan pengaturan spesifik framework tanpa router spesifik framework

Catatan

Paket ini tidak menampilkan chrome navigasi UIKit atau Android asli. Untuk navigasi navbar, tabbar, dan kulit transisi asli, gunakan @capgo/native-navigation.

Demo

Alur transisi React

Bagian inti API

• <cap-router-outlet> Mengelilingi setiap halaman.
• <cap-page> , dan
• <cap-header>, <cap-content>Mengidentifikasi wilayah yang harus bergerak bersama. <cap-footer> Mengendalikan stack jalur yang di animasikan.
• initTransitions(options?) inisialisasi ikatan framework.
• setDirection('forward' | 'back' | 'root' | 'none') menginformasikan router update berikutnya untuk menjalankan animasi.
• setupRouterOutlet(element, options?) menghubungkan outlet ke perilaku siklus 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 pengujian.

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

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

Teruskan dari @capgo/capacitor-transisi

Jika Anda menggunakan @capgo/capacitor-transisi untuk merencanakan perilaku media dan antarmuka asli, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan asli di Menggunakan @capgo/capacitor-transisi, 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, Untuk menggunakan @capgo/capacitor-player video untuk kemampuan asli di Using @capgo/capacitor-video-player, dan @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player.