AngularJS: animazioni

In AngularJS esiste un modulo specifico per le animazioni.

Le animazioni possono essere gestite sia tramite CSS3 che con jQuery. Tuttavia usare i CSS è la scelta consigliata per semplici animazioni. Quello che dobbiamo fare è per prima cosa includere il modulo nella pagina:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.min.js"></script>

Quindi occorre inserirlo nel nostro modulo principale:

var app = angular.module('MyApp', ['ngAnimate']);

Un'animazione ha diversi stati. Occorre usare le classi CSS generate da Angular per sfruttare questi due stati:

/* Entrata e uscita dell'elemento */

.contact-item.ng-enter,
.contact-item.ng-move {
	opacity: 0;
	transition: all 800ms ease-in;
}

.contact-item.ng-enter.ng-enter-active,
.contact-item.ng-move.ng-move-active {
  opacity:1;
}

@keyframes leave {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.contact-item.ng-leave {
	animation: leave 800ms;
}