@capgo/capacitor-transisi

Gerakan seperti Ionic

Pakai animasi rute iOS dan Android yang terinspirasi dari pola navigasi ponsel tanpa harus mengirim komponen Ionic.

Swipe kembali

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

Netral terhadap 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 berkualitas Ionic tanpa menerima sistem komponen Ionic. Ini menjaga navigasi di router web yang ada dan menganimasikan elemen halaman di dalam Capacitor WebView.

Pakai saat kamu 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 dengan pilihan 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

Aliran transisi React

API Core

• <cap-router-outlet> miliki stack jalur animasi.
• <cap-page> mengelilingi setiap halaman.
• <cap-header>, <cap-content>dan <cap-footer> identifikasi wilayah yang harus bergerak bersama.
• initTransitions(options?) inisialisasi ikatan framework.
• setDirection('forward' | 'back' | 'root' | 'none') menginformasikan pembaruan router berikutnya untuk menjalankan animasi mana yang harus dijalankan.
• setupRouterOutlet(element, options?) menghubungkan outlet ke perilaku siklus hidup dan sentuhan.
• 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 mengaktifkan gesekan tepi hanya di aplikasi iOS Capacitor asli. Gunakan true untuk memaksanya atau false untuk menonaktifkannya.

The gesture diimplementasikan di layer web. Ini dirancang untuk terasa seperti transisi balik Ionic iOS 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, Aktivitas Langsung @capgo/capacitor untuk detail implementasi di Aktivitas Langsung @capgo/capacitor Menggunakan @capgo/capacitor-player Video untuk kemampuan asli di Menggunakan @capgo/capacitor-player Video, dan Aktivitas Langsung @capgo/capacitor-player Video untuk detail implementasi di Aktivitas Langsung @capgo/capacitor-player Video.