Animasi AngularJS
AngularJS menyediakan transisi animasi, dengan bantuan dari CSS.
Apa itu Animasi?
Animasi adalah ketika transformasi elemen HTML memberi Anda ilusi gerak.
Contoh:
Centang kotak untuk menyembunyikan DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Aplikasi tidak boleh diisi dengan animasi, tetapi beberapa animasi dapat membuat aplikasi lebih mudah dipahami.
Apa yang Saya Butuhkan?
Untuk membuat aplikasi Anda siap untuk animasi, Anda harus menyertakan perpustakaan AngularJS Animate:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Maka Anda harus merujuk ke ngAnimatemodul di aplikasi Anda:
<body ng-app="ngAnimate">
Atau jika aplikasi Anda memiliki nama, tambahkan ngAnimatesebagai dependensi dalam modul aplikasi Anda:
Contoh
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app =
angular.module('myApp', ['ngAnimate']);
</script>
Apa yang ngAnimate Lakukan?
Modul ngAnimate menambahkan dan menghapus kelas.
Modul ngAnimate tidak menganimasikan elemen HTML Anda, tetapi ketika ngAnimate melihat peristiwa tertentu, seperti sembunyikan atau tampilkan elemen HTML, elemen tersebut mendapatkan beberapa kelas yang telah ditentukan sebelumnya yang dapat digunakan untuk membuat animasi.
Arahan di AngularJS yang menambah/menghapus kelas adalah:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
Arahan ng-showand ng-hidemenambah atau menghapus ng-hidenilai kelas.
Direktif lainnya menambahkan ng-enternilai kelas saat mereka memasuki DOM, dan ng-leaveatribut saat dihapus dari DOM.
Direktif ng-repeatjuga menambahkan ng-movenilai kelas ketika elemen HTML berubah posisi.
Selain itu, selama animasi, elemen HTML akan memiliki sekumpulan nilai kelas, yang akan dihapus saat animasi selesai. Contoh:
ng-hidedirektif akan menambahkan nilai kelas ini:
ng-animateng-hide-animateng-hide-add(jika elemen akan disembunyikan)ng-hide-remove(jika elemen akan ditampilkan)ng-hide-add-active(jika elemen akan disembunyikan)ng-hide-remove-active(jika elemen akan ditampilkan)
Animasi Menggunakan CSS
Kita dapat menggunakan transisi CSS atau animasi CSS untuk menganimasikan elemen HTML. Tutorial ini akan menunjukkan Anda berdua.
Untuk mempelajari lebih lanjut tentang Animasi CSS, pelajari Tutorial Transisi CSS dan Tutorial Animasi CSS kami .
Transisi CSS
Transisi CSS memungkinkan Anda mengubah nilai properti CSS dengan lancar, dari satu nilai ke nilai lainnya, selama durasi tertentu:
Contoh:
Ketika elemen DIV mendapatkan .ng-hidekelas, transisi akan memakan waktu 0,5 detik, dan ketinggian akan berubah dengan mulus dari 100px menjadi 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Animasi CSS
Animasi CSS memungkinkan Anda untuk mengubah nilai properti CSS dengan lancar, dari satu nilai ke nilai lainnya, selama durasi tertentu:
Contoh:
Ketika elemen DIV mendapatkan .ng-hidekelas, myChange
animasi akan berjalan, yang akan dengan mulus mengubah ketinggian dari 100px menjadi 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>