@capgo/capacitor-transisi

Gerakan Ionic-style

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

Swipe kembali

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

Tidak bergantung pada framework

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

Tidak ada penguncian antarmuka

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

Kapan Menggunakannya

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

Gunakanlah ketika Anda membutuhkan:

• transisi rute push, pop, dan root yang terasa dekat dengan konvensi platform
• gerakan header, konten, dan footer yang koordinasi
• penyimpanan halaman untuk navigasi mundur cepat
• gerakan swipe balik iOS yang opsional di sisi tepi 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 native, tabbar, dan kulit transisi native, gunakan @capgo/native-navigation.

Demo

Alur transisi React

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?) Memulai pengikat kerangka kerja.
• setDirection('forward' | 'back' | 'root' | 'none') Menginformasikan router update berikutnya tentang animasi apa yang harus dijalankan.
• setupRouterOutlet(element, options?) Menghubungkan outlet ke perilaku siklus hidup dan gestur.
• setupPage(element, callbacks?) Mengdaftarkan panggilan kembali siklus halaman.

Model Platform

platform="auto" Mengambil profil animasi iOS atau Android dari lingkungan waktu eksekusi. Anda dapat memaksa untuk menggunakan profil tertentu 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 mengaktifkannya 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.

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 dalam Menggunakan @capgo/capacitor-transisi, Menggunakan @capgo/capacitor-kegiatan-hidup-aktif untuk kemampuan asli dalam Menggunakan @capgo/capacitor-kegiatan-hidup-aktif, @capgo/capacitor-kegiatan-hidup-aktif untuk detail implementasi dalam @capgo/capacitor-kegiatan-hidup-aktif, 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.