AngularJS memberikan animasi transisi, dengan bantuan dari CSS.
Apa itu Animasi?
Animasi adalah ketika transformasi elemen HTML memberikan ilusi gerak.
Contoh:
Periksa kotak centang untuk menyembunyikan DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Cobalah sendiri "  | Aplikasi tidak harus diisi dengan animasi, namun beberapa animasi dapat membuat aplikasi lebih mudah dipahami. |
|---|
Apa yang saya Perlu?
Untuk membuat aplikasi Anda siap untuk animasi, Anda harus menyertakan perpustakaan AngularJS Animate:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Maka Anda harus mengacu pada ngAnimate modul dalam aplikasi Anda:
<body ng-app="ngAnimate"> Atau jika aplikasi Anda memiliki nama, tambahkan ngAnimate sebagai ketergantungan 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> Cobalah sendiri " Apa ngAnimate Do?
Modul ngAnimate menambah dan menghapus kelas.
Modul ngAnimate tidak bernyawa elemen HTML Anda, tetapi ketika ngAnimate melihat peristiwa-peristiwa tertentu, seperti menyembunyikan atau menunjukkan elemen HTML, elemen mendapat beberapa kelas yang telah ditentukan yang dapat digunakan untuk membuat animasi.
Arahan di AngularJS yang menambah / menghapus kelas adalah:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
The ng-show dan ng-hide arahan menambahkan atau menghilangkan ng-hide nilai kelas.
Arahan lainnya menambahkan ng-enter nilai kelas ketika mereka memasuki DOM, dan ng-leave atribut ketika mereka dikeluarkan dari DOM.
The ng-repeat direktif juga menambahkan ng-move nilai kelas ketika elemen HTML berubah posisi.
Selain itu, selama animasi, elemen HTML akan memiliki seperangkat nilai-nilai kelas, yang akan dihapus ketika animasi selesai. Contoh: ng-hide direktif akan menambah nilai kelas ini:
-
ng-animate -
ng-hide-animate -
ng-hide-add(jika elemen akan disembunyikan) -
ng-hide-remove(jika elemen akan menunjukkan) -
ng-hide-add-active(jika elemen akan disembunyikan) -
ng-hide-remove-active(jika elemen akan menunjukkan)
Animasi Menggunakan CSS
Kita dapat menggunakan transisi CSS atau animasi CSS untuk menghidupkan elemen HTML. Tutorial ini akan menunjukkan Anda berdua.
Untuk mempelajari lebih lanjut tentang CSS Animation, belajar kami CSS Transisi Tutorial dan kami CSS Animation Tutorial .
CSS Transisi
transisi CSS memungkinkan Anda untuk mengubah nilai properti CSS lancar, dari satu nilai yang lain, lebih dari durasi yang diberikan:
Contoh:
Ketika elemen DIV mendapatkan .ng-hide kelas, transisi akan mengambil 0,5 detik, dan ketinggian lancar akan berubah dari 100px ke 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Cobalah sendiri " CSS Animasi
CSS Animasi memungkinkan Anda untuk mengubah nilai properti CSS lancar, dari satu nilai yang lain, lebih dari durasi yang diberikan:
Contoh:
Ketika elemen DIV mendapatkan .ng-hide kelas, yang myChange animasi akan berjalan, yang lancar akan mengubah tinggi dari 100px ke 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
Cobalah sendiri "