Share
Atunci când este folosit în mod corespunzător, animațiile pot face ca o aplicație web să fie distractiv de folosit. Browserele moderne sunt capabile de a anima diferite elemente pe o pagină Web folosind doar CSS. Dacă utilizați AngularJS într-unul dintre proiectele dvs., puteți utiliza, de asemenea, modulul ngAnimate pentru a adăuga animație în modul Angular.
Modulul ngAnimate vă permite să adăugați animații bazate pe CSS și JavaScript pe proiectele dvs. Animațiile bazate pe CSS includ cadre cheie și tranziții. Animațiile bazate pe JavaScript trebuie să fie înregistrate folosind module.animation (). În acest tutorial, veți învăța cum să adăugați animații CSS la directivele AngularJS încorporate în animație, pentru a vă face aplicațiile mai atractive.
Primul lucru pe care trebuie să-l faceți pentru a adăuga animații este să includeți unghiular-animate.js în proiectul dvs. După ce ați terminat, puteți include modulul ngAnimate ca o dependență în aplicația dvs. pentru a începe animarea diferitelor elemente.
Accentsconagua
angular.module ('app', ['ngAnimate']);Iată o listă a direcțiilor diferite de animație și a evenimentelor de animație pe care le puteți folosi pentru a le anima:
ng-repeat poate detecta introduce, părăsi și mișcare evenimente.ng-view, ng includ, ng-comutator și ng-if poate detecta introduce și părăsi evenimente.ng-show, ng-hide și ng clasă poate detecta adăuga și elimina evenimente.ng-mesaj poate detecta, de asemenea introduce și părăsi evenimente.Trebuie să vă amintiți că aceste cârlige de animație nu sunt activate în mod prestabilit; acestea devin active numai după ce adăugați modulul ngAnimate la aplicația dvs..
Directiva ng-if din AngularJS este folosită pentru a adăuga sau elimina elemente din DOM pe baza valorii unei expresii date. Atunci când expresia este evaluată la fals, elementul este eliminat din DOM. Atunci când expresia este evaluată la Adevărat, o clonă a elementului este reintrodusă în DOM. Această adăugare și eliminarea elementelor este instantanee. Cu toate acestea, puteți anima elementele care sunt eliminate sau recreate utilizând modulul ngAnimate.
Dacă elementele sunt adăugate la DOM, puteți folosi ng-enter și ng-enter-activă pentru a le anima. Codul de tranziție și starea de animație de pornire sunt adăugate în cadrul ng-enter clasă. Starea finală de animație este adăugată în cadrul ng-enter-activă clasă. Iată codul care arată câteva bare roșii prin animarea înălțimii lor.
.ro-bar.ng-enter tranziție: toate ușurința în 0.25s; înălțime: 0px; .ro-bar.ng-enter.ng-introduceți-activ height: 30px;
În mod similar, puteți aplica și o animație pentru a ascunde barele folosind ng-leave si ng-concediu activ clase. Am renunțat la animație pentru a elimina barele roșii, astfel încât să puteți vedea în mod clar diferența dintre stările animate și cele ne-animate.
Directiva ng-view din AngularJS este utilizată ca un container pentru reîncărcarea unei porțiuni a paginii când utilizatorul comută între vizualizări diferite.
La fel ca adăugarea și eliminarea elementelor folosind ng-if, acest proces se întâmplă de asemenea foarte rapid. Dacă doriți să animați introducerea și părăsirea diferitelor elemente în vizualizare, puteți utiliza același vechi ng-enter, ng-enter-activă, ng-leave, și ng-concediu activ clase.
Pe lângă aceste patru clase, există și un ng-insufletit clasă. Pe parcursul animației, această clasă se adaugă și la toate elementele care trebuie animate. Îl puteți folosi pentru a furniza toate regulile CSS care trebuie să fie aplicabile pe parcursul animației. Iată un exemplu:
.planet-view.ng-animate tranziție: toate ușurința 0.4s; poziția: absolută; .planet-view.ng-introduceți top: 200px; opacitate: 0; .planet-view.ng-concediu, .planet-view.ng-enter.ng-enter-activ top: 0; opacitate: 1; .planet-view.ng-leave.ng-concediu-activ top: -200px; opacitate: 0;
După cum puteți vedea în codul de mai sus, a fost aplicată o durată de tranziție de 0,4 secunde pentru toate proprietățile. Când informațiile pentru o anumită planetă intră în vedere, ea începe cu o opacitate de zero și cu top poziția setată la 200 de pixeli. În același timp, elementele care urmează să părăsească vederea au o opacitate de 1.
Până la sfârșitul tranziției, elementele de intrare ajung în poziția superioară a vederii și devin complet opace. În mod similar, elementele de părăsire animă într-o poziție de 200px deasupra vederii și se estompează. Acest lucru ne oferă un efect frumos în care informațiile par să se estompeze din partea de jos a paginii și se estompează în partea de sus a paginii.
În cele ce urmează ng-view demo, încercați să faceți clic pe numele diferitelor planete pentru a vedea introduce și părăsi animații în acțiune.
Informațiile despre compoziția atmosferică a planetelor terestre au fost preluate din această pagină.
Directiva ng-repeat din AngularJS este utilizată pentru a instanțiza un șablon o singură dată pentru fiecare element dintr-o colecție dată. Această directivă este utilizată atunci când încercați să sortați, să filtrați, să adăugați sau să eliminați elemente dintr-o colecție. Există trei evenimente de animație care pot fi declanșate ng-repeat.
În ultimele două secțiuni, ați utilizat tranzițiile CSS pentru a anima diferite elemente. În această secțiune, veți învăța cum să animați diferite elemente utilizând animația de cadre cheie. Voi oferi codul atât pentru animația de tranziție, cât și pentru animația cheie, pentru a vedea diferența dintre cele două.
Iată codul de tranziție pentru a anima elementele:
.task-item.ng-enter, .task-item.ng-left tranziție: toate liniile 0.25s; .task-item.ng-lăsați top: 0; opacitate: 1; .task-item.ng-leave.ng-lăsa-activ top: 200px; opacitate: 0; .task-item.ng-introduce opacitate: 0; top: -500px; .task-item.ng-enter.ng-introduceți-activ opacitate: 1; top: 0px;
După cum puteți vedea, acest cod este foarte similar cu codul de tranziție pe care l-am folosit până acum. Stările de pornire sunt definite în secțiunea ng-enter și ng-leave. Stările finale sunt definite în ng-enter-activă și ng-concediu activ.
Următorul cod recreează același efect utilizând animațiile de cadre cheie.
@ a adăugat frame-cheie opacity: 0; top: -500px; la opacity: 1; top: 0px; @framele cheie au fost șterse de la top: 0; opacitate: 1; la top: 200px; opacitate: 0; .task-item.ng-enter animație: 0,25s adăugată; .task-item.ng-leave animație: 0,25s eliminat;
De data aceasta, folosim CSS animaţie proprietate pentru a adăuga animația. Animația reală este definită folosind @keyframes. Starea inițială și cea finală a diferitelor elemente au fost definite în cadrul cadrelor cheie. Rețineți că nu este necesar să utilizați ng-enter-activă și ng-concediu activ clase. Un avantaj al utilizării cadrelor cheie este faptul că acum animația poate fi mult mai complicată decât o tranziție simplă.
Încercați să adăugați și să ștergeți anumite activități din următoarea demonstrație pentru a vedea animația în acțiune.
Envato Tuts + a publicat, de asemenea, un tutorial privind validarea formularelor folosind ngMessages. În ultima secțiune a acestui tutorial, ați învățat cum să afișați mesaje de eroare numai după ce un utilizator a atins într-adevăr un câmp de intrare. Toate mesajele de eroare din tutorial apar și dispar instantaneu.
Dacă doriți să adăugați o animație subtilă pentru a afișa sau a ascunde mesajele de eroare, puteți face acest lucru cu ușurință utilizând modulul ngAnimate. Așa cum am menționat la începutul acestui tutorial, ng-mesaj poate detecta introduce și părăsi evenimente. Aceasta înseamnă că puteți utiliza ng-enter și ng-enter-activă pentru a specifica starea inițială și cea finală a mesajelor de eroare afișate în prezent utilizatorilor. În mod similar, puteți utiliza funcția ng-leave și ng-concediu activ clase pentru a specifica starea inițială și finală a mesajelor de eroare care sunt în proces de a fi ascunse de utilizatori.
Iată un exemplu de modificare a proprietății de opacitate pentru mesajele de eroare.
.error-msg.ng-introduce tranziție: 0.5s linear all; opacitate: 0; .error-msg.ng-enter.ng-introduceți-activ opacitate: 1;
Am adăugat un error-msg clasă la toate mesajele de eroare și puteți adăuga propriile clase și actualiza codul în consecință. În acest caz, nu am aplicat nicio animație a mesajelor de eroare care au devenit nevalide și nu ar trebui să fie afișate utilizatorilor. Aceasta înseamnă că vor dispărea instantaneu. Iată demo-ul care arată modul de utilizare a ngMessages și ngAnimate împreună.
Acest tutorial te-a învățat cum să adaugi animație aplicațiilor web AngularJS folosind modulul ngAnimate. De asemenea, ați învățat cum să aplicați diferite animații unui element bazat pe evenimentul declanșator. Secțiunea finală a prezentat modul de utilizare a modulului ngAnimate împreună cu alte module, cum ar fi ngMessages, pentru a adăuga animații frumoase mesajelor de eroare.
Un lucru pe care trebuie să-l țineți minte în timp ce utilizați animații este că nu trebuie să le folosiți excesiv. Prea multe animații pot distrage utilizatorii de la funcția principală a aplicației. Utilizați numai animații atunci când credeți că pot îmbunătăți experiența utilizatorilor.
Sper că ți-a plăcut acest tutorial. Dacă aveți sfaturi, sugestii sau întrebări legate de modulul ngAnimate, vă rugăm să comentați.
