Sebelumnya kita sudah membahas tentang Pengenalan Animation pada Vue Js. Agar lebih jelas dan gamblang, langsung saja ke penerapannya yuk.
Program yang akan dibuat kali ini adalah menampilkan sebuah tulisan, saat tombol di klik, maka tulisan akan tampil dengan perlahan.
Untuk lebih memudahkan, berikut adalah skenario program yang akan dibuat:
1. Keadaan awal adalah tulisan disable, saat tombol di klik maka tulisan akan enable.
2. Saat di klik kembali, maka tulisan akan disable lagi, enable-disable terus begitu
3. Tulisan transparent (tembus pandang) sehingga terlihat hilang
4. Tulisan muncul perlahan dalam rentang waktu 1 detik
Mari kita implementasikan skenario diatas:
1. Pada file Javascript, kita definisikan seperti berikut:
|
1 2 3 |
data: { tampil: false } |
2. Pada file html, kita implementasikan rumah true-false dan sebaliknya dengan button. Jika true maka tampil, jika false maka tidak tampil, yang tampil dan tidak tampil adalah tag <p>. Agar saat tampil terdapat animasi, maka berikan component <transition>, component ini secara default terdapat pada Vue Js jadi tidak perlu buat component ini lagi.
|
1 2 3 4 |
<button @click='tampil = !tampil'>Klik Disini</button> <transition> <p v-if="tampil"><Ini adalah transisi</p> </transition> |
3. Lanjut ke bagian css, pada bagian <style, analisa animasi : keadaan baru mulai maka gunakan v-enter, lalu tulisannya hilang maka berikan opacity: pada keadaan v-enter.
|
1 2 3 4 5 |
<style> .v-enter { opacity: 0; } </style> |
Untuk tahap berikutnya akan dibahas di part-2, yang akan di posting setelah artikel ini. Terima kasih.