@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 gerakan tepi iOS yang mengikuti jari dan dapat mengaktifkan otomatis hanya di dalam Capacitor iOS native.

Tidak terkungkung oleh UI

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

Tidak terkungkung oleh UI

Bawa toolbar, konten, footer, dan router Anda sendiri, sementara library 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 Anda yang ada dan menganimasikan elemen halaman di dalam Capacitor WebView.

Gunakan 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
• 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

Inti API

• <cap-router-outlet> mengendalikan stack jalur animasi.
• <cap-page> mengelilingi setiap halaman.
• <cap-header>, <cap-content>, dan <cap-footer> mengidentifikasi wilayah yang seharusnya bergerak bersama.
• initTransitions(options?) Menginisialisasi ikatan framework.
• setDirection('forward' | 'back' | 'root' | 'none') Menginformasikan router update berikut untuk menjalankan animasi mana.
• setupRouterOutlet(element, options?) Menghubungkan outlet ke perilaku siklus hidup dan sentuhan.
• setupPage(element, callbacks?) Mendaftarkan panggilan kembali siklus halaman.

Model Platform

platform="auto" Mengambil profil animasi iOS atau Android dari lingkungan waktu eksekusi. Anda dapat memaksa platform="ios" atau platform="android" saat 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.

Gestur ini diimplementasikan di layer web. Ini dirancang untuk terasa seperti transisi geser kembali 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 native, hubungkannya dengan Menggunakan @capgo/capacitor-transisi untuk kemampuan native di Menggunakan @capgo/capacitor-transisi, Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan native di Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup, Untuk menggunakan @capgo/capacitor-video-player untuk kemampuan asli dalam Using @capgo/capacitor-video-player, dan @capgo/capacitor-video-player untuk detail implementasi dalam @capgo/capacitor-video-player.