ngAnimate

Voir la vidéo

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 :

Publié
Technologies utilisées
Auteur :
Grafikart
Partager