hai pencari informasi, pada kesempatan kali ini saya akan memberikan tutorial dalam Membuat Effect Animasi Show-Hide dengan AngularJS.
Dalam pembahasan kali ini saya menggunakan element checkbox di HTML dalam Membuat Effect Animasi Show-Hide dengan AngularJS.
oke langsung saja pertama yang harus kalian lakukan adalah buka text-editor yang kalian suka atau yang kalian gunakan, jika sudah langsung ketik code HTML berikut ini didalam text-editor kalian.
|
1 2 3 4 5 6 7 8 9 |
<html> <head> <title>Animasi Show-Hide</title> </head> <body ng-app="ngAnimate"> <h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1> <div ng-hide="myCheck"></div> </body> </html> |
jika sudah lalu ketik script CSS seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
div { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 100%; position: relative; top: 0; left: 0; } .ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px; } |
jika script HTML dan CSS sudah, kemudian masukan script library angularJS seperti dibawah ini dan letakan diantara tag head HTML :
|
1 2 |
<script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script> |
jika sudah silahkan teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan.
maka teman-teman telah berhasil dalam Membuat Effect Animasi Show-Hide dengan AngularJS.
sekian dan terimakasih semoga bermanfaat.