Code pour implémenter certains effets d'animation dans les applications AngularJS_AngularJS

En Angular, la seule différence entre CSS et JavaScript est leur définition. Il n'y a aucune différence qui empêche l'utilisation de l'animation définie. Tout d’abord, nous devons charger le module ngAnimate dans le module racine de notre application.

angular.module('coursesApp', ['ngAnimate']);

Tous les événements d'animation JavaScript qui seront gérés restent inchangés. Voici une liste des animations directement prises en charge et de leurs différents comportements correspondants :

Ensemble d'événements de commande

• ng-view
• ng-include
• ng-switch
• ng-si entrez
• partir
• ng-repeat enter
• partir
• bouger
• ng-show
• ng-cacher
• ajout de classe ng
• supprimer

La liste ci-dessus est la même que l'article précédent, mais les classes CSS correspondantes ne sont pas mentionnées car nous n'en avons pas besoin pour définir des animations JavaScript. Tous ces événements ne seront générés qu'après que le module d'application aura chargé le module ngAnimate. Voyons maintenant comment faire fonctionner ces commandes.
Syntaxe de personnalisation des animations angulaires

Ce qui suit est un cadre de base pour une animation JavaScript personnalisée :

angular.module('coursesApp').animation('.name-of-animation', function(<injectables>) {
 return {
 event: function(elem, done){
  //logic of animation
  done();
 }
 };
});

Voici quelques points clés à retenir lors de l'écriture d'animations JavaScript dans AngularJS :

• Le nom de l'animation commence par un point (.)
• Tous les comportements d'animation acceptent deux paramètres :
• Un objet dans l'élément DOM actuel qui est sur le point d'être animé est soit un objet jQlite qui a été chargé avant que jQuery ne le charge avant AngularJS, soit un objet jQuery.
• Une fonction de rappel à la fin de l'animation. L'action correspondant à l'instruction est suspendue jusqu'à ce que la fonction de rappel soit appelée.

Nous disposons de plusieurs bibliothèques JavaScript comme jQuery, Greensock, Anima et plusieurs autres qui facilitent l'écriture d'animations. Pour simplifier les choses, j'utilise jQuery pour créer des animations dans cet article. Pour en savoir plus sur plusieurs autres bibliothèques, vous pouvez visiter leurs sites Web correspondants.

Laissez ng-view bouger

Une animation utilisée sur une directive ng-view s'exécute lors du changement de vue dans une application AngularJS.

Ce qui suit est l'effet visuel provoqué par l'animation lorsqu'une vue apparaît :

courseAppAnimations.animation('.view-slide-in', function () {
 return {
 enter: function(element, done) {
  element.css({
  opacity: 0.5,
  position: "relative",
  top: "10px",
  left: "20px"
  })
  .animate({
  top: 0,
  left: 0,
  opacity: 1
  }, 1000, done);
 }
 };
});

Ce qui précède crée un effet coulissant lorsqu'une vue entre dans l'écran. La méthode done est transmise en tant que fonction de rappel. Cela indique que l'animation est terminée et que le framework AngularJS peut maintenant continuer avec l'action suivante.

Notez la méthode dans laquelle la méthode animate() est appelée. Nous n'avons pas besoin de convertir cet élément en objet jQuery car jQuery est chargé avant le chargement d'AngularJS.

Nous devons maintenant appliquer cet effet d'animation à la directive ng-view. Même si l'animation est définie en JavaScript, par convention nous utilisons une balise class pour l'appliquer à la directive cible.

<div ng-view class="view-slide-in"></div>

animation ng-répétition
Parmi les instructions que vous pouvez choisir d'utiliser, ng-repeat est une instruction très importante. Il existe deux instructions de fonctionnement de base : le filtrage et le tri. Ajoutez, déplacez ou supprimez les instructions correspondantes en fonction de l'opération effectuée.
La démonstration suivante utilise quelques animations de base. Lorsque des modifications se produisent, vous pouvez voir les effets d'animation correspondants.

courseAppAnimations.animation('.repeat-animation', function () {
 return {
 enter : function(element, done) {
  console.log("entering...");
  var width = element.width();
  element.css({
  position: 'relative',
  left: -10,
  opacity: 0
  });
  element.animate({
  left: 0,
  opacity: 1
  }, done);
 },
 leave : function(element, done) {
  element.css({
  position: 'relative',
  left: 0,
  opacity: 1
  });
  element.animate({
  left: -10,
  opacity: 0
  }, done);
 },
 move : function(element, done) {
  element.css({
  left: "2px",
  opacity: 0.5
  });
  element.animate({
  left: "0px",
  opacity: 1
  }, done);
 }
 };
});

Animation Ng-masquer

La directive ng-hide est utilisée pour ajouter ou supprimer la classe de style ng-hide de l'élément cible. Pour utiliser une animation, nous devons souvent ajouter ou supprimer des styles CSS. Transmettez le nom de la classe à la classe d'animation pour obtenir cet effet. Cela nous permet d'inspecter la classe et d'apporter les modifications appropriées au code.

Ce qui suit est un exemple de code d'animation qui utilise la directive ng-hide pour obtenir l'effet de fondu des éléments :

courseAppAnimations.animation('.hide-animation', function () {
 return {
 beforeAddClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.animate({
   opacity: 0
  },500, done);
  } else {
  done();
  }
 },
 removeClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.css('opacity',0);
  element.animate({
   opacity: 1
  }, 500, done);
  } else {
  done();
  }
 }
 };
});

Laissez les commandes personnalisées entrer en jeu

Afin d'animer des instructions personnalisées, nous devons utiliser le service $animate. Bien que le service $animate fasse partie du framework de base d'AngularJS, ngAnimate doit être chargé pour que ce service joue pleinement son rôle.

En utilisant le même exemple de l'article précédent, nous présenterons une liste de cours d'une page. Nous créons une commande pour afficher les détails du cours dans une grille, et le contenu de la grille changera lorsque l'on cliquera sur le lien "Afficher les statistiques". Ajoutons une animation pour présenter cette transition à l'utilisateur.

Lorsque l'animation de transition démarre, nous ajouterons une balise de classe CSS et à la fin, supprimerons la balise de classe. Voici un exemple de code pour cette directive :

app.directive('courseDetails', function ($animate) {
  return {
  scope: true,
  templateUrl: 'courseDetails.html',
  link: function (scope, elem, attrs) {
   scope.viewDetails = true;
   elem.find('button').bind('click', function () {
   $animate.addClass(elem, "switching", function () {
    elem.removeClass("switching");
    scope.viewDetails =! scope.viewDetails;
    scope.$apply();
  });
  });
 }
 };
});

正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：

.det-anim.switching {
 transition: all 1s linear;
 position: relative;
 opacity: 0.5;
 left: -20px;
}

又或者，这里有一个jQuery写的动画，可以用于同样的指令：

courseAppAnimations.animation('.js-anim', function () {
 return {
 beforeAddClass: function(element, className, done) {
  if (className === 'switching') {
  element.animate({
   opacity: 0
  },1000, function (){
   element.css({
   opacity: 1
   });
   done();
  });
  }
  else {
  done();
  }
 }
 }
});

这些动画当中，如果它可以应用于内建的指令上，它同样也可以被应用到自定义的指令上：

<div course-details 
  class="det-anim"
  title="{{course.title}}">
</div>

你可以在示例页面看到以上所有的动画运行时的效果。
 
结论

动画，当被适合并正常的运用时，将给应用程序带来生气。正如我们所看到的，AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。

但是，使用太多的动画将会使得应用程序变得缓慢，而对于用户来，这将使应用程序看起来i不够人性化。所以，必须小心并最优化的使用这件利器。