Transisi pada website di era sekarang ini sudah menjadi bagian utama dari website. Karena selain untuk mempercantik tampilan, juga menambah kesan dinamisĀ  dan canggih bagi pengunjung website kalian. Karena pengunjung merasakan adanya interaksi antar pengguna dengan website. Berbicara mengenai transisi, pada kesempatan kali ini kita akan belajar bagaimana cara membuat transition dengan Materialize.

Transition ini adalah fitur dari framework materialize css. Untuk penggunaan dan efek transisinya sudah default ya, tidak bisa kita rubah-rubah. Yang perlu kalian perhatikan adalah cara penggunaan transisi ini untuk bagian html seperti apa. Pada contoh kali ini kita akan mencoba membuat transisi untuk list item. Nantinya efek tulisan dari list item itu akan muncul saat tombol kita tekan. Baiklah langsung saja kita mulai prakteknya, kalian bisa ikuti contoh code dibawah ini.

transition.html

Setelah sudah kalian bisa simpan filenya dengan format html. Untuk melihat hasilnya kalian harus buka file kalian dibrowser, jika berhasil maka tampilanya akan seperti ini.

Tampilan diatas adalah tampilan awal yang hanya berisikan tombol saja. Namun saat tombol tersebut kalian tekan, maka akan muncul list item seperti gambar dibawah ini.

List item ini akan muncul dengan efek transisi fade in dari arah sebelah kiri. Sehingga akan terlihat lebih keren dari sudut pandang pengunjung yang melihatnya. Kalian bisa kembangkan lagi fungsi ini disesuaikan dengan konsep dan materi website kalian masing-masing. Mudah bukan ?

Oke sekian pembahasan mengenai cara membuat transition dengan Materialize. Semoga pembahasan artikel kali ini bermanfaat untuk kita semua.