Latest web development tutorials

AngularJS Animasi

AngularJS memberikan animasi, Anda dapat menggunakan dengan CSS.

animasi AngularJS perlu memperkenalkan perpustakaan sudut-animate.min.js. 

<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

Ini harus digunakan dalam model aplikasi ngAnimate: 

<body ng-app="ngAnimate">

Apa animasi?

Animasi adalah efek dinamis dengan mengubah elemen HTML yang dihasilkan.

contoh

Pilih kotak centang untuk menyembunyikan DIV:

<Tubuh ng-app = "ngAnimate ">

Sembunyikan DIV: <input type = "checkbox " ng-model = "myCheck">

<Div ng-hide = "myCheck "> </ div>

</ Body>

Coba »
catatan aplikasi animasi tidak terlalu banyak, tapi penggunaan yang tepat animasi dapat meningkatkan kekayaan halaman, atau Anda dapat memungkinkan pengguna untuk lebih mudah memahami.

Jika kita menerapkan nama aplikasi tersebut telah diatur, Anda dapat menempatkan ngAnimate ditambahkan langsung dalam model:

contoh

<Tubuh ng-app = "myApp ">

<H1> Hide DIV: <input type = "checkbox " ng-model = "myCheck"> </ h1>

<Div ng-hide = "myCheck "> </ div>

<Script>
var aplikasi = angular.module ( 'myApp' , [ 'ngAnimate']);
</ Script>

Coba »

ngAnimate dilakukan?

Model ngAnimate dapat menambah atau menghapus kelas.

Model ngAnimate tidak membuat elemen bernyawa HTML, tapi ngAnimate akan memantau acara, mirip dengan elemen tampilan HTML tersembunyi, jika suatu peristiwa terjadi ngAnimate akan menggunakan kelas yang telah ditetapkan untuk menghidupkan elemen HTML.

AngularJS menambah / menghapus instruksi kelas:

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

ng-show dan ng-hide perintah untuk menambahkan atau menghapus ng-hide nilai kelas.

instruksi lain akan ditambahkan ke dalam DOM ng-enter kelas, menghapus DOM akan menambah ng-leave properti.

Ketika HTML perubahan posisi elemen, ng-repeat perintah juga dapat menambahkan ng-move jenis.

Selain itu, setelah selesai, koleksi kelas elemen HTML akan dihapus. Sebagai contoh: ng-hide perintah akan menambah sekitar kelas:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (jika elemen akan disembunyikan)
  • ng-hide-remove (jika elemen ditampilkan)
  • ng-hide-add-active (jika elemen tersembunyi)
  • ng-hide-remove-active (jika elemen ditampilkan)

Menggunakan CSS Animation

Kita dapat menggunakan CSS transisi (peralihan) atau CSS animasi yang menjiwai elemen HTML, bagian Anda dapat melihat kami CSS transisi tutorial , CSS animasi tutorial .

CSS Transisi

CSS memungkinkan kita kelancaran transisi ke nilai properti CSS berubah ke yang lain:

contoh

Dalam DIV elemen set .ng-hide kelas, transisi membutuhkan 0,5 detik, tinggi dari 100px ke 0:

<Gaya>
div {
transisi: semua linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</ Style>

Coba »

CSS Animation

CSS animasi memungkinkan Anda untuk kelancaran memodifikasi nilai properti CSS:

contoh

Dalam elemen DIV menetapkan .ng-hide kelas -waktu, myChange animasi dijalankan, maka akan tinggi mulus dari 100px ke 0:

<Gaya>
@keyframes myChange {
dari {
height: 100px;
} Untuk {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animasi: 0.5s myChange;
}
</ Style>

Coba »