@capgo/capacitor-transitions

Motion gaya Ionic

Gunakan animasi rute iOS dan Android yang meniru pola navigasi mobile tanpa perlu menyertakan komponen Ionic.

Geser kembali

Aktifkan edge gesture iOS yang mengikuti jari dan bisa aktif otomatis hanya di dalam Capacitor iOS native.

Agnostik framework

Gunakan web components secara langsung atau helper untuk React, Vue, Angular, Svelte, dan Solid.

Tanpa UI lock-in

Gunakan toolbar, konten, footer, dan router sendiri sementara library mengoordinasikan layer transisi.

Kapan Digunakan

@capgo/capacitor-transitions Cocok untuk aplikasi yang ingin motion halaman sekualitas Ionic tanpa memakai sistem komponen Ionic. Navigasi tetap di web router yang sudah ada dan elemen halaman dianimasikan di dalam Capacitor WebView.

Gunakan saat Anda butuh:

• transisi push, pop, dan root route yang terasa natural sesuai konvensi platform
• pergerakan header, konten, dan footer yang terkoordinasi
• page caching untuk navigasi back yang cepat
• gestur edge swipe-back iOS opsional yang mengikuti gerakan jari pengguna
• helper setup khusus framework tanpa router khusus framework

Catatan

Package ini tidak merender native UIKit atau Android navigation chrome. Untuk navbar, tabbar, dan shell transisi native, gunakan @capgo/native-navigation.

Demo

Alur transisi React

Inti API

• <cap-router-outlet> mengelola stack rute animasi.
• <cap-page> membungkus setiap halaman.
• <cap-header>, <cap-content>, dan <cap-footer> identifikasi area yang harus bergerak bersamaan.
• initTransitions(options?) menginisialisasi binding framework.
• setDirection('forward' | 'back' | 'root' | 'none') memberitahu update router berikutnya animasi mana yang harus dijalankan.
• setupRouterOutlet(element, options?) menghubungkan outlet ke lifecycle dan perilaku gesture.
• setupPage(element, callbacks?) mendaftarkan callback lifecycle halaman.

Model Platform

platform="auto" memilih profil animasi iOS atau Android dari runtime environment. Anda bisa memaksa platform="ios" atau platform="android" saat pengujian.

swipe-gesture="auto" menggunakan runtime helpers Capacitor dan hanya mengaktifkan edge gesture pada aplikasi iOS Capacitor native. Gunakan true untuk memaksanya aktif atau false untuk menonaktifkannya.

Gesture ini diimplementasikan di web layer. Didesain agar terasa seperti transisi swipe-back iOS milik Ionic dengan menggerakkan progress animasi dari posisi pointer, lalu selesai atau dibatalkan berdasarkan jarak dan kecepatan.

Lanjutkan dari @capgo/capacitor-transitions

Jika Anda menggunakan @capgo/capacitor-transitions untuk merencanakan perilaku media dan antarmuka native, hubungkan dengan Menggunakan @capgo/capacitor-transitions untuk kapabilitas native di Using @capgo/capacitor-transitions, Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player untuk kemampuan native di Menggunakan @capgo/capacitor-video-player, dan @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player.