Animasi AngularJS

Dengan bantuan CSS, AngularJS menyediakan transisi animasi.

Apa itu animasi?

Animasi adalah perubahan elemen HTML yang memberikan kesan gerakan.

instansi

Pilih kotak centang untuk menyembunyikan DIV:

<body ng-app="ngAnimate">
Sembunyikan DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

Coba Sendiri

Aplikasi tidak harus diisi dengan animasi, tetapi beberapa animasi dapat membuat aplikasi lebih mudah dipahami.

Apa yang saya butuhkan?

Untuk mempersiapkan aplikasi Anda untuk animasi, Anda harus menginclude pustaka AngularJS Animate:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

Lalu, Anda harus mengutip dalam aplikasi. ngAnimate Modul:

<body ng-app="ngAnimate">

atau, jika aplikasi Anda memiliki nama, silakan ngAnimate Tambahkan sebagai ketergantungan modul aplikasi:

instansi

<body ng-app="myApp">
<h1>Menyembunyikan DIV：<input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

Coba Sendiri

Apakah fungsi ngAnimate?

ngAnimate modul menambahkan dan menghapus kelas.

ngAnimate Modul ini tidak akan membuat elemen HTML Anda beranimasi, tetapi saat ngAnimate Notasi beberapa peristiwa (seperti penghilangan atau penampilan elemen HTML) akan mendapatkan beberapa kelas yang diatur sebelumnya, dan kelas ini dapat digunakan untuk membuat animasi.

Instruksi menambahkan dan menghapus kelas di AngularJS termasuk:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show dan ng-hide Instruksi menambahkan dan menghapus ng-hide Nilai kelas.

Instruksi lainnya menambahkan nilai kelas saat memasuki DOM ng-enter nilai kelas, dan menambahkan nilai kelas ini saat dihapus dari DOM ng-leave Atribut.

Ketika elemen HTML berubah posising-repeat Instruksi ini juga akan menambahkan ng-move Nilai kelas.

Selain itu, selama proses animasi, elemen HTML akan memiliki beberapa nilai kelas, dan nilai kelas ini akan dihapus setelah animasi selesai. Contoh:ng-hide Instruksi akan menambahkan nilai kelas ini:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Untuk menyembunyikan elemen)
  • ng-hide-remove(Untuk menampilkan elemen)
  • ng-hide-add-active(Untuk menyembunyikan elemen)
  • ng-hide-remove-active(Untuk menampilkan elemen)

Melakukan animasi menggunakan CSS

Kami dapat menggunakan transisi CSS atau animasi CSS untuk menambah efek animasi bagi elemen HTML. Tutorial ini akan menunjukkan keduanya.

Untuk mendapatkan informasi lebih lanjut tentang animasi CSS, belajar tutorial transisi CSS dan tutorial animasi CSS kami.

Transisi CSS

Transisi CSS memungkinkan Anda mengubah nilai atribut CSS secara lancar dalam waktu yang ditentukan:

instansi

ketika elemen DIV mendapatkan .ng-hide Saat ini, transisi akan berlangsung 0,5 detik, tinggi akan berubah secara lancar dari 100px ke 0:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

Coba Sendiri

Animasi CSS

Animasi CSS memungkinkan Anda untuk merubah nilai properti CSS secara halus dalam waktu yang diberikan:

instansi

ketika elemen DIV mendapatkan .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Coba Sendiri