Kata pengantar
AngularJS memberikan efek animasi yang dapat digunakan dengan CSS. AngularJS membutuhkan pengenalan perpustakaan angular-animate.min.js saat menggunakan animasi.
<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">
1. Apa itu animasi?
Animasi adalah efek perubahan dinamis yang dihasilkan dengan mengubah elemen HTML.
<! 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; left: 200px;}</style><script src="js/angular.min.js"></script><script src="js/angular-animate.min.js"></script></head><body ng-app="ngAnimate"><h3>Hide DIV: <input type="checkbox" ng-model="myCheck"></h3><div ng-hide = "mycheck"> </div> </body> </html> Jika aplikasi kami telah mengatur nama aplikasi, kami dapat menambahkan ngAnimate secara langsung ke model:
<! 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 = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> </head> <body ng-app = "myApp"> <h3> Sembunyikan div: <input type = "centang" myApp "> <h3> Sembunyikan: <input type =" centang "myp"> <h3> persembunyian: <input type = "centang" myP "> <h3> Sembunyikan: <input type =" centang "" myP "> <h3> Sembunyikan: <input type =" centang "my"> ng-hide = "mycheck"> </div> <script> var app = angular.module ('myapp', ['nganimate']); </script> </body> </html>2. 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. Arahan AngularJS untuk menambah/menghapus kelas: ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch .
(1) NG-Class Menentukan kelas CSS yang digunakan oleh elemen HTML
Arahan ng-class digunakan untuk mengikat satu atau lebih kelas CSS secara dinamis ke elemen HTML. Nilai Petunjuk ng-class dapat berupa string, objek, atau array. Jika itu adalah string, beberapa nama kelas dipisahkan oleh spasi. Jika itu adalah objek, Anda perlu menggunakan pasangan nilai kunci , yang merupakan nilai boolean , dan nilainya adalah nama kelas yang ingin Anda tambahkan. Kelas hanya akan ditambahkan jika kunci itu benar . Jika merupakan array, itu dapat terdiri dari string atau kombinasi objek, dan elemen array dapat berupa string atau objek.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> Angularjs </iteme> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.js"> </script>. Latar Belakang: LightBlue; padding: 20px; Font-family: "Courier New";}. Tomat {latar belakang-color: Coral; padding: 40px; Font-family: verdana;} </tyle> </head> <body ng-app = ""> <span> Pilih kelas: </span> <pilih ng-model = "home"> <value option = "sky"> wol warna </option> </home home "> home home! itu! </h4> </div> </body> </html>(2) NG-Class-Even mirip dengan NG-Class, tetapi hanya berfungsi pada garis genap; NG-Class-ODD mirip dengan NG-Class, tetapi hanya berfungsi pada garis ganjil; NG-Class-ODD mirip dengan NG-Class, tetapi hanya berfungsi pada garis ganjil;
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> AngularJS </iteme> <script src = "js/angular.min.js"> </script> <tyle> .stripedeven {color: white; latar belakang-warna: cyan;}. stripedodd {color: white; latar belakang-kolor: yellowgreen;} </tyle> </head> <body ng-app = "myapp"> <table ng-controller = "myctrl"> <tr> <th> name </th> <t> country </t '' lip class-class = "ng-repeat =" ng-class-class-even = " <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </able> <script> var app = angular.module ("myf", []); app.controller ("myctrl", function ("myf" {{{{{{{{"myfed (" Futterkiste", "Country" : "Germany" }, { "Name" : "Berglunds snabbk", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezuma", "Country" : "Mexico" }, { "Name" : "Ernst Handel", "Country" : "Austria" } ]}); </script> </body> </html>(3) NG-Jika jika kondisinya salah hapus elemen html
Arahan ng-if digunakan untuk menghapus elemen HTML ketika ekspresi salah. Jika hasil eksekusi pernyataan IF benar, elemen yang dihapus akan ditambahkan dan ditampilkan. Arahan ng-if berbeda dari ng-hide , ng-hide menyembunyikan elemen, sedangkan ng-if menghilangkan elemen dari DOM.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script></head><body ng-app="" ng-init="myVar = true"><h3>Keep HTML: <input type="checkbox" ng-model = "myvar"> </h3> <v ng-if = "myvar"> <h1> selamat datang </h1> <p> Selamat datang di rumah saya. </p> <hr> </div> <p> Elemen Div dihapus ketika kotak centang tidak dicentang. </p> <p> Ketika kotak centang dipilih kembali, elemen Div akan ditampilkan kembali. </p> </body> </html>
(4) NG-checked menentukan apakah elemen dipilih
Arahan ng-checked digunakan untuk mengatur properti yang diperiksa dari kotak centang atau tombol radio. Jika properti ng-checked mengembalikan true, kotak centang atau tombol radio akan dipilih.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> AngularJs </itement> <script src = "js/angular.min.js"> </script> </head> <pecon "ng =" "> <h3> cars saya: </h3 h3> <" input = "ng =" "> <h3> CARS saya: </h3 h3> <" input = "ng =" "> <h3> cars saya: </h3 h3> <" input = "ng =" "> <h3> cars saya: </h3 h3> <" input = "ng =" "NEG <input type="checkbox" ng-checked="all">Volvo<br> <input type="checkbox" ng-checked="all">Ford<br> <input type="checkbox" ng-checked="all">Ford<br> <input type="checkbox" ng-checked="all"> ng-checked="all">Mercedes <h3>Click "Check all" to select all mobil. </h3> </body> </html>
3. Gunakan animasi CSS
Kita dapat menggunakan transisi CSS atau animasi CSS untuk membuat elemen HTML menghidupkan.
(1) Transisi CSS
Transisi CSS memungkinkan kita untuk memodifikasi satu nilai atribut CSS dengan lancar ke yang lain: Ketika kelas .ng-hide diatur pada elemen Div, transisi memakan waktu 0,5 detik dan tinggi perubahan dari 100px ke 0.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> AngularJS </iteme> <script src = "js/angular.min.js"> </script> <skrip src = "js/angular-animate.min.min.js"> </script>; Latar Belakang: LightBlue; Tinggi: 100px;}. Ng-hide {Height: 0;} </tyle> </head> <body ng-app = "myapp"> <h1> sembunyikan div: <input type = "kotak centang" ng-model = "mycheck"> </h1> <v ng-hide = "mycheck"> </diveck "var. ['nganimate']); </script> </body> </html>(2) Animasi CSS
Animasi CSS memungkinkan Anda untuk dengan lancar memodifikasi nilai atribut CSS: Ketika kelas .ng-hide diatur pada elemen div, animasi myChange akan dieksekusi, dan itu akan dengan lancar mengubah ketinggian dari 100px ke 0.
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> AngularJs </iteme> <script src = "js/angular.min.min.js"> </skrip: script src = "js/angular-animate.min.min.js"> </script> script = "js/angular-animate.min.min.js"> </script> </scrips = "js/angular-animate.min.min.js"> </script> </script> screct = "js/angular-animate.min.min.js"> </script> </script> script = "js/angular-animate.min.min.js"> </script> </script> } ke {height: 10; }} div {height: 100px; background-color: lightblue;}div.ng-hide { animation: 10s myChange;}</style></head><body ng-app="ngAnimate">Hide DIV: <input type="checkbox" ng-model="myCheck"><div ng-hide="myCheck"></div></body></html>Meringkaskan
Di atas adalah semua tentang animasi AngularJS. Artikel ini merangkumnya secara rinci dan memberikan kode contoh. Saya berharap ini akan membantu semua orang yang belajar beberapa angularjs.