Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Come creare animazioni in AngularJS con ngAnimate

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called AngularJS Form Validation With ngMessages and ngAnimate.
AngularJS Form Validation With ngMessages

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

Quando vengono usate propriamente, le animazioni possono rendere un'applicazione web divertente da usare. I browser moderni sono capaci di animare diversi elementi su una pagina web usando solamente il CSS. Se stai usando AngularJS in uno dei tuoi progetti, puoi anche usare il modulo ngAnimate per aggiungere un'animazione con la sintassi di Angular.

Il modulo ngAnimate ti permette di aggiungere il CSS così come animazioni basati su JavaScript per i tuoi progetti. Le animazioni basati su CSS includono dei fotogrammi (ndr. keyframe) e transizioni. Le animazioni basate su JavaScript devono essere registrare usando module.animation(). In questo tutorial, imparerai come aggiungere animazioni CSS alle direttive incorporate di AngularJS per rendere le tue applicazioni più attraenti.

Le nozioni di base

La prima cosa che hai bisogno di fare per aggiungere le animazioni è includere angular-animate.js nel tuo progetto. Una volta fatto, puoi includere il modulo ngAnimate come una dipendenza nella tua applicazione per cominciare ad animare diversi elementi.

Qui una lista di diverse direttive e di eventi per le animazioni che puoi usare per animarli:

  • ng-repeat può rilevare gli eventi entrata, uscita e spostamento.
  • ng-view, ng-include, ng-switch e ng-if può rilevare gli eventi entrata ed uscita.
  • ng-show, ng-hide e ng-class può rilevare gli eventi aggiunta e rimozione.
  • ng-message può anche rilevare gli eventi entrata ed uscita.

Dovresti ricordarti che questi ganci di animazioni non sono abilitati di base; diventano attivi solamente dopo che hai aggiunto il modulo ngAnimate nella tua applicazione.

Animare ng-if usando le transizioni CSS3

La direttiva ng-if in AngularJS è usata per aggiungere o rimuovere elementi nel DOM sul valore di una espressione data. Quando l'espressione è false, l'elemento è rimosso dal DOM. Quando l'espressione è true, un clone dell'elemento è reinserito all'interno del DOM. Questa aggiunta e rimozione degli elementi è istantanea. Tuttavia, puoi animare gli elementi che vengono rimossi o ricreati usando il modulo ngAnimate.

Se gli elementi vengono aggiunti nel DOM, puoi usare le classi ng-enter e ng-enter-active per animarle. Il codice di transizione così come lo stato dell'animazione di partenza sono aggiunti dentro la classe ng-enter. Lo stato d'animazione finale è aggiunto dentro la classe ng-enter-active. Questo è il codice per mostrare alcune barre rosse animando la loro altezza.

Ugualmente, puoi anche applicare un'animazione per nascondere le barre usando le classi ng-leave e ng-leave-active. Ho omesso l'animazione per la rimozione delle barre rosse così che tu possa vedere chiaramente la differenza tra stati animati e non animati.

Animare ng-view usando le transizioni CSS3

La direttiva ng-view in AngularJS è usata come contenitore per ricaricare una porzione della pagina quando l'utente cambia tra diverse viste.

Così come l'aggiunta e la rimozione degli elementi usando ng-if, anche questo processo si verifica molto velocemente. Se vuoi animare l'entrata e l'uscita di diversi elementi dentro la vista, puoi usare le stesse classi ng-enter, ng-enter-active, ng-leave e ng-leave-active.

Dietro queste quattro classi, c'è anche una classe ng-animate. Durante il corso dell'animazione, questa classe è anche aggiunta su tutti gli elementi che hanno bisogno di essere animati. Puoi anche usarlo per fornire tutte le regole CSS che hanno bisogno di essere applicate durante il corso dell'animazione. Ecco un esempio:

Come puoi vedere nel codice di sopra, una durata della transizione di 0,4 secondi è stata applicata su tutte le proprietà. Quando l'informazione per uno specifico pianeta entra nella vista, comincia con un'opacità di zero e con la posizione top impostata a 200px. Allo stesso tempo, gli elementi che dovranno lasciare la vista hanno un'opacità di 1.

Alla fine della transizione, gli elementi di entrata raggiungono la posizione superiore della vista e diventano completamente opachi. Ugualmente, gli elementi di uscita vengono animati fino alla posizione superiore di 200px sopra la vista e scompaiono. Questo ci da un bel effetto dove le informazioni appaiono dal fondo della pagina e scompaiono nella parte superiore della pagina.

Nella seguente demo ng-view, prova a fare clic sul nome dei diversi pianeti per vedere in azione le animazioni di entrata e di uscita.

Le informazioni della composizione atmosferica dei pianeti terrestri sono stati presi da questa pagina.

Animare ng-repeat usando animazioni con keyframe

La direttiva ng-repeat in AngularJS viene usata per istanziare un modello una volta per elemento in una collezione data. Questa direttiva è usata quando stai provando ad ordinare, filtrare, aggiungere o rimuovere elementi da una collezione. Ci sono tre eventi d'animazione che possono essere richiamati con ng-repeat.

  • enter: Questo evento è richiamato ogni volta che viene aggiunto un nuovo elemento alla lista o quando un elemento nella lista è mostrato dopo aver applicato un filtro.
  • leave: Questo evento è richiamato ogni volta che viene rimosso un elemento dalla lista o quando un elemento nella lista viene filtrato.
  • move: Questo evento è richiamato quando un elemento adiacente è filtrato e quando un elemento interessato ha bisogno di essere riordinato.

Nelle ultime due sezioni, hai usato le transizioni CSS per animare diversi elementi. In questa sezione, imparerai come animare diversi elementi usando animazioni con keyframe. Fornirò il codice per entrambe le transizioni e per l'animazione con keyframe così che tu possa vedere la differenza tra i due.

Ecco il codice della transizione per animare gli elementi:

Come puoi vedere questo codice è davvero simile al codice della transizione che abbiamo usato fino a questo punto. Gli stati di partenza sono definiti in ng-enter e ng-leave. Gli stati di chiusura sono definiti in ng-enter-active e ng-leave-active.

Il seguente codice ricrea lo stesso effetto usando le animazioni con keyframe.

Questa volta, stiamo usando la proprietà CSS animation per aggiungere l'animazione. L'animazione attuale è definita usando @keyframes. Lo stato iniziale e finale dei diversi elementi sono stati definiti a loro volta con i propri keyframe. Nota che non dobbiamo più le classi ng-enter-active e ng-leave-active. Un beneficio di usare i keyframe è che ora le animazioni possono essere più complicate rispetto ad una semplice transizione.

Prova ad aggiungere o rimuovere alcuni task nella seguente demo per vedere l'animazione in azione.

Usare ngAnimate con ngMessages

Envato Tuts+ ha anche pubblicato un tutorial su validare i tuoi form usando ngMessages. Nell'ultima sezione di questo tutorial, hai imparato come mostrare i messaggi di errore solo dopo che l'utente ha toccato veramente un campo input. Tutti i messaggi di errore in questo tutorial appaiono e scompaiono istantaneamente.

Se vorresti aggiungere un'animazione fine per mostrare o nascondere i messaggi di errore, puoi farlo semplicemente usando il modulo ngAnimate. Come menzionato all'inizio di questo tutorial, ng-message può rilevare gli eventi di entrata di uscita. Questo significa che puoi usare le classi ng-enter e ng-enter-active per specificare lo stato iniziale e finale dei messaggi di errore che vengono mostrati agli utenti. Ugualmente, puoi usare le classi ng-leave e ng-leave-active per specificare lo stato iniziale e finale dei messaggi di errore che stanno per essere nascosti dagli utenti. 

Ecco un esempio di cambiamento della proprietà di opacità per i messaggi di errore.

Ho aggiunto una classe error-msg a tutti i messaggi di errore e puoi aggiungere delle tue classi personali e aggiornare il codice di conseguenza. In questo caso, non ho applicato alcuna animazione ai messaggi di errore che diventano non validi e non dovrebbero apparire agli utenti. Questo significa che scompariranno istantaneamente. Ecco una demo che mostra come usare ngMessages e ngAnimate insieme.

Conclusione

Questo tutorial ti insegnava come aggiungere un'animazione alle tue applicazioni web con AngularJS usando il modulo ngAnimate. Hai anche imparato come applicare diverse animazioni ad un elemento basato su un richiamo di un evento. La sezione finale spiegava come usare il modulo ngAnimate con gli altri moduli come ngMessages per aggiungere delle belle animazioni per i messaggi di errore.

Una cosa che devi tenere in mente mentre usi le animazioni è che non dovresti farne un uso eccessivo. Troppe animazioni possono distrarre gli utenti dalla funzione principale dell'applicazione. Usa le animazioni solamente quando pensi che possono migliorare realmente l'esperienza dell'utente.

Spero che questo tutorial ti sia piaciuto. Se hai consigli, suggerimenti o domande relative al modulo ngAnimate, per favore commenta.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.