Continuiamo a parlare di animazione, ripartendo dall’ultimo articolo.
Oggi vedremo come aggiungere animazioni a direttive custom, per fare questo Angular ha a disposizione il servizio $animate.

Per attivare gli eventi sono disponibili i metodi: enter, leave, move, addClass, removeClass, e setClass.

In questo articolo ci soffermeremo su addClass e removeClass, per utilizzarli la sintassi è la seguente:

dove element è l’elemento al quale viene rispettivamente aggiunta e rimossa la classe CSS.

Vediamo con un esempio il funzionamento:

Analizziamo nel dettaglio cosa accade al click sull’elemento div:

  • il click attiva la direttiva custom-directive
  • viene aggiunta la classe className-add 
  • il servizio $animate attende per il primo frame dell’animazione
  • le classi className e className-add sono aggiunte agli elementi facendo scattare l’animazione CSS
  • $animate scandisce lo stile per ottenere durata e tipo di animazione e attende fino al completamento
  • l’animazione termina e le classi CSS vengono rimosse dagli elementi, esclusa className

Nel caso inverso (quando scatta removeClass) i passi sono simili:

  • il click attiva la direttiva custom
  • viene aggiunta la classe className-remove
  • le classi className-remove-active viene aggiunta, mentre className-add viene rimossa facendo scattare l’animazione CSS
  • $animate scandisce lo stile per ottenere durata e tipo di animazione e attende fino al completamento
  • l’animazione termina e le classi CSS vengono rimosse dagli elementi