Sebelumnya kita sudah membahas tentang Pengenalan Animation pada Vue Js. Agar lebih jelas dan gamblang, langsung saja ke penerapannya yuk, dan di postingan sebelumnya kita sudah membuat sebagian dari Mengimplementasikan Animation pada Vue Js Part 1.

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 lanjutkan implementasikan skenario diatas:
4. Tulisan muncul, akhir kegiatan mulai, gunakan v-enter-to. Untuk tulisan muncul, maka gunakan opacity:1, tambahkan pada css didalam tag <style>.

 

5. Untuk menjalankan keadaan mulai tersebut kita gunakan v-enter-active, lalu apa yang akan dijalankan? Jawabannya opacity-nya, maka tuliskan transition: opacity 1s, tambahkan pada css di dalam tag <style>.

 

Untuk script selengkapnya sebagai berikut: