Animasi AngularJS
AngularJS memberikan efek animasi yang dapat digunakan dengan CSS.
AngularJS menggunakan animasi untuk memperkenalkan Perpustakaan Angular-Animate.min.js.
<skrip src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script>
Anda juga perlu menggunakan model Nganimate dalam aplikasi Anda:
<body ng-app = "nganimate">
Apa itu animasi?
Animasi adalah efek perubahan dinamis yang dihasilkan dengan mengubah elemen HTML.
Contoh
Centang kotak centang untuk menyembunyikan div:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <tyle> div {transisi: semua linear 0.5s; Latar Belakang: LightBlue; Tinggi: 100px; Lebar: 100%; Posisi: kerabat; TOP: 0; Kiri: 0;}. Ng-hide {Height: 0; Lebar: 0; latar belakang-warna: transparan; Atas: -200px; Kiri: 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> <skrip src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script></head><body ng-app="ngAnimate"><h1>Hide DIV: <input type="checkbox" ng-model="myCheck"></h1><div ng-hide = "mycheck"> </div> </body> </html>Efek Menjalankan:
Catatan: Seharusnya tidak ada terlalu banyak animasi dalam aplikasi, tetapi penggunaan animasi yang tepat dapat meningkatkan kekayaan halaman dan memudahkan pengguna untuk dipahami.
Jika aplikasi kami telah mengatur nama aplikasi, kami dapat menambahkan Nganimate secara langsung ke model:
Contoh
<! Doctype html> <html> <head> <meta charset = "utf-8"> <tyle> div {transisi: semua linear 0.5s; Latar Belakang: LightBlue; Tinggi: 100px; Lebar: 100%; Posisi: kerabat; TOP: 0; Kiri: 0;}. Ng-hide {Height: 0; Lebar: 0; latar belakang-warna: transparan; Atas: -200px; Kiri: 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> <skrip src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script></head><body ng-app="myApp"><h1>Hide DIV: <input type="checkbox" ng-model="myCheck"></h1><div ng-hide = "mycheck"> </div> <script> var app = angular.module ('myapp', ['nganimate']); </script> </body> </html>Efek Menjalankan:
Apa yang dilakukan Nganimate?
Model Nganimate dapat menambah atau menghapus kelas.
Model Nganimate tidak dapat menghidupkan elemen HTML, tetapi Nganimate akan memantau peristiwa, mirip dengan menyembunyikan dan menampilkan elemen HTML. Jika suatu peristiwa terjadi, Nganimate akan menggunakan kelas yang telah ditentukan untuk menghidupkan elemen HTML.
Petunjuk AngularJS untuk menambah/menghapus kelas:
NG-Show
NG-HIDE
NG-Class
NG-View
NG-termasuk
NG-repeat
NG-IF
NG-SWITCH
Arahan NG-Show dan NG-hide digunakan untuk menambah atau menghapus nilai kelas NG-HIDE.
Arahan lain akan menambahkan kelas NG-ENTER saat memasuki DOM, dan menghapus DOM akan menambahkan properti NG-LEVE.
Ketika posisi elemen HTML berubah, arahan NG-Repeat juga dapat menambahkan kelas NG-MOVE.
Selain itu, setelah animasi selesai, koleksi kelas elemen HTML akan dihapus. Misalnya: Petunjuk NG-Hide akan menambahkan kelas berikut:
ng-animate
ng-hide-animate
ng-hide-add (jika elemen akan disembunyikan)
NG-hide-remove (jika elemen akan ditampilkan)
ng-hide-add-aktif (jika elemen akan disembunyikan)
NG-hide-remove-aktif (jika elemen akan ditampilkan)
Menggunakan animasi CSS
Kita dapat menggunakan transisi CSS atau animasi CSS untuk membuat elemen HTML menghidupkan. Anda dapat merujuk ke tutorial transisi CSS dan tutorial animasi CSS kami.
Transisi CSS
Transisi CSS memungkinkan kita untuk memodifikasi satu nilai atribut CSS dengan lancar ke yang lain:
Contoh
Ketika elemen div memiliki set kelas .ng-hide, transisi membutuhkan 0,5 detik, dan ketinggian berubah dari 100px ke 0:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <tyle> div {transisi: semua linear 0.5s; Latar Belakang: LightBlue; Tinggi: 100px;}. Ng-hide {height: 0;} </tyle> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <skrip src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script></head><body ng-app="myApp"><h1>Hide DIV: <input type="checkbox" ng-model="myCheck"></h1><div ng-hide = "mycheck"> </div> <script> var app = angular.module ('myapp', ['nganimate']); </script> </body> </html>Animasi CSS
Animasi CSS memungkinkan Anda untuk memodifikasi nilai properti CSS dengan lancar:
Contoh
Ketika kelas .ng-hide diatur pada elemen div, animasi mychange akan dieksekusi, yang akan dengan lancar mengubah ketinggian dari 100px ke 0:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <tyle> @keyframes mychange {from {height: 100px; } ke {height: 0; }} div {height: 100px; latar belakang-kolor: lightblue;} div.ng-hide {animasi: 0.5s mychange;} </tyle> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> skrip src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> Sembunyikan div: input = "kotak centang" ng-model = "mycheck"> < ng-hide = "mycheck"> </div> </body> </html>Di atas adalah kumpulan informasi tentang animasi AngularJS. Silakan merujuk jika Anda membutuhkannya.