Laboratorium Pemrograman dan Basis Data

Ser Geser dengan data-transition...

Kali ini masih membahas mengenai sebuah framework yang fenomenal yaitu jQuery Mobile. Bagi yang belum tahu dengan jQuery mobile bisa klik disini atau disini untuk mengenal jQuery Mobile. Baiklah, sekarang saya akan memperkenalkan salah satu fitur yang bisa kita handalkan dalam membangun aplikasi. Fitur yang saya maksud adalah "Transition"...

Menurut Google Translate, Transition dalam bahasa Indonesia diartikan dengan peralihan. Jadi sudah jelas, fitur yang satu ini akan membantu kita memberikan animasi peralihan dari halaman satu ke halaman yang lain. Pada dasarnya, transition ini bisa kita kustomisasi sesuai dengan kebutuhan. Tapi kali ini saya beri batasan masalah untuk menjelaskan mengenai transition yang ada pada bawaan jQuery Mobile versi 1.3.0 (Versi yang saya gunakan...)

Berikut penjelasan singkat mengenai Transition yang ada pada jQuery Mobile:

1. fade : peralihan dari halaman ke halaman lain dengan memberikan efek blur seolah-olah halaman hilang atau muncul dari kegelapan. 
2. pop : peralihan dari halaman ke halaman lain dengan memberikan efek seperti "muncul kepermukaan". Jadi ibarat kata, halaman yang tenggelam muncul ke layar. (Penjelasan yang membingungkan)
3. flip : peralihan dari halaman ke halaman lain dengan memberikan efek seperti membalikkan halaman tersebut, tapi bukan seperti membalikkan halaman pada buku.
4. turn : memiliki efek yang mirip dengan flip, namun ini seolah-olah titik rotasi halaman berada di pinggir halaman, sedangkan pada flip, titik rotasi pada garis tengah halaman.
5. flow : efek yang dihasilkan adalah halaman seperti tenggelam, kemudian dilempar ke bagian samping hingga tidak terlihat lagi. Efek yang satu ini, emang terlihat lebih garang dari pada yang lain, karena halaman bertukar dengan cara dilempar-lempar. Cocok bagi developer yang suka main keras.
6. slidefade : gabungan dari fade dan slide, sehingga halaman tersebut bergeser kemudian menghilang.
7. slide : efek yang diberikan pada peralihan ini yaitu membuat halaman seolah-olah meluncur dan digantikan oleh halaman berikutnya.
8. slideup : sama seperti slide, namun pergerakannya dari bawah ke atas.
9. slidedown : sama seperti slide, namun pergerakannya dari atas ke bawah.
10. none : sesuai namanya, peralihan tidak ada efek apa-apa. Main tukar aja. Simple, no animation!

Untuk menggunakan transition ini, kita harus menambahkan atribut pada element yang menjadi trigger (Pemicu) misalkan link atau <a></a>. Rumusnya seperti ini :

  <a href="index.html" data-transition="flow">Let Me Flow!</a>

 Dengan formula ini, maka halaman "index.html" akan dibuka dengan efek transition "flow". Silahkan ganti sesuai data transition yang diinginkan. Pada beberapa efek transition, bisa juga ditambahkan atribut "data-direction='reverse'" tanpa kutip. Contoh:

 <a href="index.html" data-transition="slide" data-direction="reverse">Let Me Slide!</a>

Formula diatas akan memberikan efek slide dengan arah pergerakan sebaliknya. Selebihnya, tergantung imajinasi teman-teman dalam memanfaatkan fitur yang ada pada jQuery Mobile untuk menciptakan aplikasi yang responsif.

Karena saya menyadari bahwa penjelasan saya mengenai transition sangat terbatas makauUntuk mengetahui dan mencoba demo dari masing-masing efek transition silahkan kunjungi link ini.
Referensi: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
Sumber Gambar: http://blogfreakz.com/mobile-development/jquery-mobile-tutorials/