@capgo/capacitor-transitions

Stilisasi gerakan Ionik

Pakai animasi rute iOS dan Android yang diinspirasi oleh pola navigasi ponsel tanpa harus mengirimkan komponen Ionik.

Geser kembali

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

Netral terhadap framework

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

Tidak ada ikatan UI

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

Kapan Menggunakannya

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

Pakai saat Anda membutuhkan:

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

Catatan

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

Demo

Alur Pindah React

Core 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?) Memulai pengikat kerangka.
• 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?) Mengdaftarkan panggilan kembali siklus halaman.

Model Platform

platform="auto" Menggunakan iOS atau Android animation profile dari lingkungan waktu eksekusi. Anda dapat memaksa platform="ios" atau platform="android" ketika melakukan pengujian.

swipe-gesture="auto" menggunakan bantuan runtime Capacitor dan mengaktifkan gerakan tepi hanya di aplikasi iOS native Capacitor. Gunakan true ketika melakukan pengujian. false Untuk menonaktifkannya.

The gesture is implemented in the web layer. It is designed to feel like Ionic’s iOS swipe-back transition by driving animation progress from the pointer position, then finishing or cancelling based on distance and velocity.

Teruskan dari @capgo/capacitor-transisi

Teruskan dari @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transisi Judul Bagian: “Teruskan dari @capgo/capacitor-transisi” untuk merencanakan perilaku media dan antarmuka asli, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan asli dalam Menggunakan @capgo/capacitor-transisi, Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan asli dalam Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup untuk detail implementasi dalam @capgo/capacitor-aktivitas-hidup, Menggunakan @capgo/capacitor-pemain-video untuk kemampuan asli dalam Menggunakan @capgo/capacitor-pemain-video, dan @capgo/capacitor-pemain-video untuk detail implementasi dalam @capgo/capacitor-pemain-video.