jQuery Mobile - Transisi
Ini memungkinkan untuk mengubah nilai properti yang terjadi selama durasi yang ditentukan dan mengubah perilaku elemen dari satu keadaan ke keadaan lain dengan menerapkan gaya berbeda untuk setiap keadaan.
Tabel berikut mencantumkan beberapa transisi halaman yang digunakan dalam kerangka kerja jQuery Mobile -
| Sr.No. | Transisi & Deskripsi | Untuk Halaman | Untuk Dialog |
|---|---|---|---|
| 1 | fade Anda dapat membuat elemen memudar masuk dan keluar dari visibilitas. |
Fade Page | Fade Dialog |
| 2 | flip Balik elemen dari belakang ke depan ke halaman berikutnya. |
Balik Halaman | Balik Dialog |
| 3 | pop Anda dapat membuat jendela popup. |
Halaman Pop | Dialog Pop |
| 4 | flow Tampilkan halaman berikutnya dengan menjauhkan halaman saat ini. |
Flow Page | Flow Dialog |
| 5 | slide Anda dapat menggeser halaman dari kanan ke kiri. |
Halaman Slide | Dialog Geser |
| 6 | slidefade Menggeser halaman dari kanan ke kiri dan memudar di halaman berikutnya. |
Halaman Slidefade | Dialog Slidefade |
| 7 | slideup Menggeser halaman dari bawah ke atas. |
Halaman Slideup | Dialog Slideup |
| 8 | slidedown Geser halaman dari atas ke bawah. |
Halaman Slidedown | Dialog Slidedown |
| 9 | turn Anda dapat beralih ke halaman berikutnya. |
Balikkan Halaman | Putar Dialog |
| 10 | none Anda tidak dapat menggunakan efek transisi apa pun dengan menggunakan atribut ini. |
Tidak Ada Halaman | Tidak Ada Dialog |
Mengatur Transisi dan Konfigurasi Global
Secara default, halaman akan memiliki fadetransisi dalam kerangka. Anda dapat menggunakan transisi khusus dengan menambahkandata-transitionatribut ke tautan. Anda dapat menggunakan efek transisi default yang berbeda untuk halaman yang menggunakandefaultPageTransitionopsi secara global. Untuk dialog, Anda bisa memanfaatkandefaultDialogTransition pilihan.
Transisi Fallback
Semua transisi mendukung transformasi 3D kecuali transisi fade. Perangkat yang tidak mendukung transformasi 3D, mereka harus menggunakan transisi fade. Beberapa browser tidak mendukung transformasi 3D untuk setiap jenis transisi, jadi Anda dapat menggunakanfade sebagai fallback transisi default.
Max Scroll untuk Transisi
Transisi disetel ke tidak ada saat Anda menggulir dari atau ke halaman dan posisi gulir akan tiga kali tinggi layar perangkat. Terkadang, Anda mungkin lambat dalam merespons atau browser mungkin macet saat Anda mengklik elemen navigasi apa pun; jadi untuk menghindari ini kami menggunakan posisi gulir untuk transisi dengan menggunakangetMaxScrollForTransition fungsi.
Lebar Maks untuk Transisi
Anda dapat menonaktifkan transisi saat lebar jendela lebih tinggi dari lebar piksel. Anda dapat mengonfigurasi lebar maksimal untuk transisi menggunakan$.mobile.maxTransitionWidthopsi global, yang disetel ke false secara default. Dibutuhkan nilai seperti lebar piksel atau nilai salah, dan transisi akan disetel ke tidak ada jika bukan nilai salah saat jendela lebih tinggi dari nilai yang ditentukan.
Transisi Halaman yang Sama
Anda dapat menambahkan transisi ke halaman saat ini menggunakan allowSamePageTransition pilihan widget penampung halaman change() metode.
Membuat Transisi Kustom
Anda dapat membuat transisi kustom di halaman menggunakan $.mobile.transitionHandlers opsi yang memperluas pemilihan transisi di situs web atau aplikasi.