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.

6 September 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat