Lompat ke konten

@capgo/capacitor-transisi

Tambahkan transisi jalur yang terasa asli dan swipe-back iOS opsional ke aplikasi Capacitor tanpa menerapkan UI Ionik.

Gaya gerakan seperti Ionic

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

Swipe kembali

Aktifkan gestur tepi iOS yang mengikuti jari dan dapat secara otomatis diaktifkan 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 pengunci UI.

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

@capgo/capacitor-transitions untuk aplikasi yang ingin 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 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 yang opsional yang mengikuti jari pengguna
  • bantuan pengaturan spesifik framework tanpa router spesifik framework
Demo transisi halaman React yang di animasi menampilkan navigasi maju dan mundur dalam sebuah shell Capacitor-style
Alur transisi React
  • <cap-router-outlet> mengendalikan stack jalur yang di animasi.
  • <cap-page> mengelilingi setiap halaman.
  • <cap-header>, <cap-content>dan <cap-footer> mengidentifikasi wilayah yang harus bergerak bersama.
  • initTransitions(options?) menginisialisasi ikatan framework.
  • setDirection('forward' | 'back' | 'root' | 'none') menginformasikan router update berikutnya tentang animasi yang harus dijalankan.
  • setupRouterOutlet(element, options?) menghubungkan outlet ke perilaku siklus hidup dan sentuhan.
  • setupPage(element, callbacks?) mengdaftarkan panggilan kembali siklus halaman.

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.

Gerakan ini diimplementasikan di lapisan web. Gerakan ini dirancang untuk terasa seperti transisi gesekan balik iOS Ionic dengan mengemudi kemajuan animasi dari posisi pointer, kemudian menyelesaikan atau membatalkan berdasarkan jarak dan kecepatan.

Teruskan dari @capgo/capacitor-transisi

Judul bagian “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 Hidup @capgo/capacitor untuk detail implementasi di Aktivitas Hidup @capgo/capacitor Menggunakan @capgo/capacitor-player Video untuk kemampuan asli di Menggunakan @capgo/capacitor-player Video, dan Menggunakan @capgo/capacitor-player Video untuk detail implementasi di @capgo/capacitor-player Video.