Haloo teman-teman Dumet School. Kembali lagi dengan saya di kursus web design. Kali ini saya akan membahas tentang Cara Membuat Animasi Hide Dengan Menggunakan AngularJS. Animasi Hide disini saya akan menggunakan property transition untuk membuat sebuah animasi hilang atau muncul terhadap suatu elemen atau objek. Karena AngularJS menyediakan transisi beranimasi, dengan bantuan dari CSS.

Agar teman-teman lebih paham Cara Membuat Animasi Hide Dengan Menggunakan AngularJS kita langsung saja kita buat struktur htmlnya seperti pada script di bawah ini.

Jika sudah maka teman-teman tambahkan link angularJSnya agar animasi yang kita buat dapat berjalan, teman-teman bisa letakkan di dalam tag head.

Jika sudah maka teman-teman bisa jalankan di browser masing-masing. Maka jika teman-teman not check pada input checkbox maka div dengan class hide akan muncul sedangkan jika di check maka div dengan class hide akan menghilang. Menghilang dan munculnya akan perlahan-lahan sesuai dengan transisi yang sudah di buat di dalam css dengan tinggi yang sudah di atur.

Nah yang teman-teman harus perhatikan adalah sebagai berikut.

ng-app berfungsi untuk mendefinisikan sebuah komponen yang ada di AngularJS. Dan kebetulan komponen disini adalah ngAnimate untuk membuat animasi.

ng-model berfungsi untuk mengambil nilai pada tag HTML (input , select , textarea ).

ng-hide berfungsi untuk mengatur tampilan suatu elemennya menjadi tidak ada.

Demikian artikel tentang Cara Membuat Animasi Hide Dengan Menggunakan AngularJS. Semoga artikel ini dapat bermanfaat untuk teman-teman. Buat teman-teman yang penasaran bisa langsung mencobanya. Semoga dapat bermanfaat dan menambah ilmu dan wawasan teman-teman. Selamat mencoba dan terima kasih. Sekian