À propos de ce tutoriel
ngAnimate est un nouveau module pour AngularJS qui est apparu dans les dernières version du Framework. Comme son nom l’indique ce module vous permet de mettre en place des animations CSS3 simplement sur vos éléments HTML.
Pour mettre en place ces animations il suffit d’utiliser les animations ou les transitions.
En utilisant les animations
ngAnimate ajoute 2 classes importantes :
- ng-enter, lorsqu’un élément est ajouté
- ng-leave, lorsque l’élement est supprimé
Un exemple de CSS (sans préfixe)
.animated.ng-enter, .animated.ng-leave{
animation-duration:1s;
animation-fill-mode:both;
}
.roll.ng-enter{ animation-name: rollIn; }
.roll.ng-leave{ animation-name: rollOut; }
.fade.ng-enter{ animation-name: fadeIn; }
.fade.ng-leave{ animation-name: fadeOut; }
En utilisant les transitions
Il faut alors utiliser 4 classes :
- ng-enter, état au début de l'animation d'entrée
- ng-enter-active, état à la fin de l'animation d'entrée
- ng-leave
- ng-leave-active
Un petit exemple de CSS (sans préfixe)
/* Durée de l'animation */
.view.ng-enter, .view.ng-leave {
transition-duration: 1s; }
/* Au démarage */
.view.ng-enter {
opacity: 0;
transform: translateX(20px); }
/* Fin de l'animation d'entrée */
.view.ng-enter.ng-enter-active {
opacity: 1;
transform: translateX(0px); }
/* Fin de l'animation de sortie */
.view.ng-leave.ng-leave-active {
opacity: 0;
transform: translateX(-20px);
}
Petit exemple pratique
Il est possible d’utiliser ngAnimate avec la directive ngView. Voici un petit exemple d’interface mobile (avec slide) qui utilise les animations CSS3 et ngAnimate :