Hallo sobat, kembali lagi dengan saya pada tutorial Dumet School. Di artikel kali ini kita akan belajar Cara Menggunakan Fungsi ngAnimate Pada Angularjs di mana fungsi ini sama dengan fungsi animate() pada Jquery. Meskipun fungsinya sama untuk penulisannya pun berbeda, sudah tidak asing lagi bukan dengan framework yang satu ini yaitu angularjs yang di kembangkan oleh google. Angular sendiri banyak sekali kegunaannya untuk membantu membangun sebuah proyek, salah satunya adalah untuk membuat layout web dinamis dan juga bisa untuk load pada database dengan digabungkan dengan bahasa PHP dan masih banyak yang lainnya. Nah di latihan kali ini kita akan belajar tentang penggunaan fungsi ngAnimate pada angularjs, demo gambarnya seperti gambar di bawah ini.
Seperti yang kalian lihat pada gambar di atas ini, ada fungsi Check. Begitu di Check maka gambar akan di jalankan oleh fungsi ngAnimate, dan begitu di uncheck maka gambar akan kembali seperti semula. Baik langsung saja kita prektekkan, seperti biasa siapkan text editornya kemudian copy script html nya di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title> cara menggunakan fungsi ngAnimate pada angularjs</title> </head> <body> <h1>Chek<input type="checkbox"></h1> <div> <img src="DumetSchool.png"> </div> </body> </html> |
Lalu tambahkan style css nya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div { transition: all linear 0.9s; background-color: lightblue; height: 265px; width: 700px; position: relative; top: 0; left: 0; } .ng-hide { background-color: transparent; top:-400px; left: 200px; } |
Jika sudah save dengan index.html dan jalankan pada browsernya
Namun Check belum berfungsi, sekarang kita akan implementasikan Cara Menggunakan Fungsi ngAnimate Pada Angularjs. Langkah pertama masukkan library AngularJs nya dan angular-animate js nya di dalam tag head.
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> |
Berikutnya kita berikan fungsi ngAnimate nya, teman-teman tambahkan script nya seperti gambar di bawah ini yang saya beri kotak warna hijau.
Jika sudah save dan refresh pada browsernya, klik Check pada checkbox nya. Maka fungsi ngAnimate akan menjalankan perintahnya dan ketika di uncheck (ng-hide=”myCheck”) akan menjalankan slide ke atas yang saya berikan pada css nya.
Lalu saya berikan (transition: all linear 0.9s;) pada css nya, agar fungsi ngAnimate nya ada jeda 0.9s
Bagaimana,,..?? Cukup mudah bukan,,,?!?
Oke sekian dulu pada artikel kali ini tentang Cara Menggunakan Fungsi ngAnimate Pada Angularjs,kita jumpa lagi di tutorial berikutnya. Sampai Jumpa dan Terima Kasih.
Semoga bermanfaat 🙂
Baca juga artikel tentang Memaksimalkan Sublime Text untuk AngularJS