Animasi AngularJS

Dengan bantuan CSS, AngularJS menyediakan transisi animasi.

Apa itu animasi?

Animasi adalah transformasi elemen HTML yang memberikan kesan gerakan.

contoh

Pilih kotak centang untuk sembunyikan DIV:

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

Cuba Sendiri

Aplikasi tidak seharusnya diisi dengan animasi, tetapi beberapa animasi dapat membuat aplikasi lebih mudah untuk memahami.

Saya memerlukan apa?

Supaya aplikasi anda siap untuk animasi, anda mesti termasuk 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 gunakan ngAnimate Tambahkan sebagai ketergantungan modul aplikasi:

contoh

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

Cuba Sendiri

Apakah fungsi ngAnimate?

ngAnimate modul menambahkan dan menghapus kelas.

ngAnimate Modul ini tidak akan membuat elemen HTML Anda bergerak, tetapi saat ngAnimate Perhatikan bahwa beberapa peristiwa (seperti penghapus dan menampilkan elemen HTML) akan mendapatkan beberapa kelas yang didefinisi sebelumnya, yang 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)

Menggunakan CSS untuk mengelola animasi

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

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

Transisi CSS

Transisi CSS memungkinkan Anda merubah nilai atribut CSS secara lancar dalam waktu yang diberikan:

contoh

pada masa DIV elemen mendapat .ng-hide Saat kelas, transisi akan berlangsung 0.5 saat, tinggi akan bergerak lancar dari 100px ke 0:

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

Cuba Sendiri

Animasikan CSS

Animasikan CSS memungkinkan anda untuk secara lancar mengubah nilai atribut CSS dalam tempoh yang diberikan:

contoh

pada masa DIV elemen mendapat .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>

Cuba Sendiri