Membuat Effect Animasi Show-Hide dengan AngularJS

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.

<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 :

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 :

<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.

Membuat Effect Animasi Show-Hide dengan AngularJS

Kategori