:::: MENU ::::

Les animations avec AngularJS

Vous travaillez avec AngularJs et voulez mettre un peu de mouvement dans votre site, dashboard ou autre SPA ?

AngularJs possède un module d’animation qui permet de réaliser assez facilement de belles petites choses, encore faut il comprendre son fonctionnement.

Dans cet article on va essayer de comprendre ( et surtout jouer ) avec le module ngAnimate d’angular !

Les Bases

Le système d’animation d’angular est constitué d’un service ( $animate ) qui va appliquer des classes css en fonction de différents évènements d’une animation. Ces évènements peuvent être préprogrammés par angular ( c’est le cas de certaines directives ) ou personnalisés.

Comme il s’agit de classes css, la configuration des animations peut se faire..en css ! En utilisant le système des transitions de css3 .

 

Rappel sur les transitions

Un petit exemple rapide d’une transition simple en css3

 

.transitionSimple {
    transition: 0.5s ease all;
}

.transitionSimple:hover {
    opacity: 0;
}
<div class="transitionSimple">Je suis une simple transition au survol</div>

On fixe dans la classe transitionSimple une transition pour toutes les propriétés css ( le all ) avec une durée de 0.5s et une progression de type ease.

Lorsqu’on modifie une propriété au survol (pseudo-element :hover), la transition s’applique, et notre div s’anime .

Remarque : il faut parfois utiliser transition avec des prefix mais cette propriété est de plus en plus supportée nativement

Vous pouvez aussi tester d’autres types de transition par défaut  ou en définir de nouveaux avec animate.css et les keyframes.

 

Appliquer une transition avec AngularJs

Pour commencer on va faire simple, un bouton qui déclenche l’apparition d’un texte.

ng-if est une directive qui ajoute un morceau de DOM si une condition est vrai. Chance pour nous, elle s’intègre dans le système d’animation d’angular.

En regardant la doc de ng-if on voit une partie animation qui nous parle de enter et de leave.

Additionally, you can provide animations via the ngAnimate module to animate the enter and leave effects.

Allons voir d’un peu plus prêt dans la doc du service $animate  .

 Le service possède bien deux méthodes, enter et leave. Il s’agit des différents états que va prendre l’élément et qui pourront être animés. Sur certains états correspond l’ajout de classes Css.

On voit dans le cas de la méthode enter que la classe ng-enter est ajouté puis ng-enter-active lorsque l’animation doit commencer. Ce sont ces classes qu’il faut configurer dans le css pour définir notre animation.

Exemple 1 Faire apparaître un élément

 

angular.module("myApp", ["ngAnimate"]);
<div ng-controller="MyCtrl">
<button ng-click="ng-click="animeEnCours = !animeEnCours">Anime</button>
<h2 ng-if="animeEnCours">Le Javascript c'est formidable</h2>
</div>
.elementAnime.ng-enter,
.elementAnime.ng-leave {

 transition: 1s linear all;

}

.elementAnime.ng-enter,
.elementAnime.ng-leave.ng-leave-active {
 opacity: 0;
}
.elementAnime.ng-leave,
.elementAnime.ng-enter.ng-enter-active {
 opacity: 1;
}

Coté Js on peut difficilement faire plus simple, on charge juste le module d’animation et le reste se débrouille ! ( On aurait quand même pu intégrer la fonction qui inverse l’état de la variable dans un contrôleur ). Notez au passage que ngAnimate est un module, il doit donc être chargé en plus d’angularJs.

Si on observe le DOM lorsqu’on clique sur le bouton , on peut voir apparaître l’élément h2 et les différentes classes Css de l’animation.

 

L’avantage de ce système est qu’il s’applique à d’autres directives d’angular. Voici la liste

Directive

Supported Animations

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 & ngHide

add and remove (the ng-hide class value)

form

add and remove (dirty, pristine, valid, invalid & all other validations)

ngModel

add and remove (dirty, pristine, valid, invalid & all other validations)

 

Il est évidement possible de créer soit même de nouveaux évènements dans ses propres directives.

Si ngIf utilise les fonctions enter et leave, la directive ngShow se sert des méthodes addClass et removeClass.

Dans l’exemple ci dessous, j’intègre le même système avec la directive ngShow ( qui est d’ailleurs plus adapté au masquage d’un élément )

je vous conseil de relancer les exemples ou de les voir directement sous codepen car il y a des ratés à « l’embedded »

See the Pen Animation test with AngularJs by Maxime Warnier (@maxdow) on CodePen.5209

Utiliser les animations avec AngularJs

Le système de transition de css3 est intéressant mais reste assez limité lorsqu’il s’agit de faire des animations plus complètes.

Mais comme tout cela est bien fait, il existe la propriété animation en CSS, que l’on peut bien sur utiliser avec AngularJs.

Rien à toucher coté Js , c’est juste du css !

Je vous invite à utiliser la librairie animate.css qui contient tout un tas d’animations simple mais efficaces.

 Un exemple de carrousel avec ngWhen

See the Pen Carousel Cat by Maxime Warnier (@maxdow) on CodePen.5209

Pour résumer

Utiliser les animations sous angularJS c’est :

  • Inclure ngAnimate

  • Regarder quelles classes s’appliquent à notre directive

  • Customiser son CSS

On l’a vu, une fois maîtrisé, le principe des animations avec AngularJs peut être très sympathique. Je n’ai pas traité la partie concernant les animations en javascript mais sachez qu’il est possible les gérer sans toucher au Css ( http://docs.angularjs.org/api/ngAnimate ), cela peut valoir le coup lorsqu’on vise des navigateur non compatible par exemple.


So, what do you think ?