page-translate

Animer les éléments HTML grâce au module ng-animate d'AngularJS 1.2

AngularJS / Javascript

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Le module ngAnimate est arrivé avec la version 1.2 du Framework AngularJS, Il nous permet d'animer nos éléments HTML avec une grande facilité.

Contrairement aux précédentes versions d'AngularJS, dans la version 1.2, on n'a plus besoin de déclarer la directive ng-animate dans les éléments HTML. Il suffit juste d'inclure le module ngAnimate à notre application AngularJS et ng-animate s'applique automatiquement sur tous les éléments pourtant les directives suivantes : ngRepeat, ngInclude, ngSwitch, ngShow, ngHide, ngView ...

Ce module nous permet d'appliquer des animations, non seulement lors de l’apparition des éléments HTM, mais aussi lors de leurs suppressions. Pour cela, on peut utiliser :

Les animations :

Il faut définir 2 classes CSS :

  • ng­-enter : appelée quand un élément HTM est ajouté
  • ng­-leave : appelée quand un élément HTM est supprimé

Les transitions :

Dans ce cas, il nous faut 4 classes CSS :

  • ng­-enter : appelée au début de l'apparition de l'élément
  • ng­-enter­-active : appelée à la fin de l'apparition de l'élément
  • ng-­leave : appelée au début de la disparition de l' élément
  • ng-­leave­-active : appelée à la fin de la disparition de l'élément

Un petit exemple d'utilisation avec les transitions :

Fichier HTML :

<html lang="fr" >

<body  ng-app="MyApp">

<div class="my-element" ng-view >

   </div>

    <script  src="angular1.2/angular.js"></script>

    <script  src="angular1.2/angular-animate.js"></script>

    <script >

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

    </script>

  </body>

</html>

Fichier CSS :

 /*Déterminer la durée de l'animation*/
.my-element.ng-enter, .my-element.ng-leave{
        -webkit-animation-duration: 0.5s; 
        animation-duration: 0.5s; 
}

/*Début de l'animation - apparition de l'élément*/
.my-element.ng-enter{
        opacity: 0;
        transform: translateX(100px);
        -webkit-transform: translateX(100px);
}

/*Fin de l'animation - apparition de l'élément*/
.my-element.ng-enter-active{
        opacity: 1;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
}

/*Fin de l'animation - disparition de l'élément*/
.my-element.ng-leave-active{
        opacity: 0;
        transform: translateX(-100px);
         -webkit-transform: translateX(-100px);
}

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles