Membuat Efek Animasi Sendiri pada Angular JS

Hallo teman-teman, pada kesempatan kali ini saya akan memberikan satu trik tentang angular js, pada trik kali ini saya akan membahas tentang bagaimana cara membuat custom animasi pada angular js.

Pada angular js sendiri sudah ada attribute untuk memanipulasi objek atau elemen HTML. Tapi tahukah kalian kalua kita bias menambahkan animasi untuk attribute tertentu.

Pada kasus kali ini saya akan membahas mengenai cara memberikan animasi custom ketika menggunakan attribute ng-hide .

Pertama kali saya akan buat struktur HTML sederhana dengan menghubungkan juga angular-animate.js pada HTML yang saya buat seperti dibawah ini

Selanjutnya saya akan memberikan sedikit animasi pada  objek yang saya buat menggunakan CSS seperti ini.

Jika sudah selesai, coba jalankan di browser, kira-kira hasilnya akan seperti ini.

dan jika ikon checkbox tersebut di klik, maka akan terjadi transisi pada objek hijau dibawahnya akan pelah-pelan, menghilang dan berubah warna menjadi merah.

Baiklah teman-teman, demikian artikel kali ini, semoga bermanfaat. terima kasih.