Uno degli strumenti disponibili agli sviluppatori per rendere i si ti e le applicazioni più accattivanti sono le animazioni. AngularJS, fedele alla sua filosofia, offre un modulo per controllarle tutte (one ring to one module to rule them all!)

Prima di iniziare, diamo una definizione specifica di Animazione: movimento continuo in un periodo di tempo definitoBasti pensare che solo dal CSS3 in poi è stato possibile demandare da Javascript alle API del Browser: migliore compatibilità, prestazioni elevate e pulizia del codice.

Bene, lezione di storia a parte, utilizziamo Angular per ampliare le animazioni di base grazie al modulo ngAnimate.

Analizziamo cosa succede nel dettaglio: il modulo ngAnimate crea per la direttiva ngShow una serie di classi che vengono aggiunte dinamicamente alla pressione del bottone, ngClick. Nello specifico ngClick modifica fadeAnimation da true a false: l’effetto è determinato dal CSS.

Elenco Direttive ngAnimate

(per attivare l’animazione è sufficiente modificare il CSS ):

Direttiva

Azioni animate

ngRepeat

Enter, leave, and move

ngView

Enter and leave

ngInclude

Enter and leave

ngSwitch

Enter and leave

ngIf

Enter and leave

ngClass

Add and remove

ngShow and ngHide

Add and remove

form and ngModel

Add and remove

ngMessages

Add and remove

ngMessage

Enter and leave