Code zum Implementieren einiger Animationseffekte in AngularJS-Anwendungen_AngularJS

In Angular besteht der einzige Unterschied zwischen CSS und JavaScript in ihrer Definition. Es gibt keinen Unterschied, der die Verwendung der definierten Animation verhindert. Zuerst müssen wir das ngAnimate-Modul in das Root-Modul unserer Anwendung laden.

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

Alle verarbeiteten JavaScript-Animationsereignisse bleiben unverändert. Im Folgenden finden Sie eine Liste direkt unterstützter Animationen und ihrer entsprechenden unterschiedlichen Verhaltensweisen:

Befehlsereignissatz

• ng-view
• ng-include
• ng-switch
• ng-if enter
• gehen
• ng-repeat enter
• gehen
• bewegen
• ng-show
• ng-hide
• ng-class add
• entfernen

Die obige Liste ist dieselbe wie im vorherigen Artikel, die entsprechenden CSS-Klassen werden jedoch nicht erwähnt, da wir sie nicht zum Definieren von JavaScript-Animationen benötigen. Alle diese Ereignisse werden erst generiert, nachdem das Anwendungsmodul das ngAnimate-Modul geladen hat. Schauen wir uns nun an, wie diese Befehle funktionieren.
Syntax zum Anpassen von Angular-Animationen

Das Folgende ist ein grundlegendes Framework für benutzerdefinierte JavaScript-Animationen:

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

Hier sind einige wichtige Punkte, die Sie beim Schreiben von JavaScript-Animationen in AngularJS beachten sollten:

• Der Name der Animation beginnt mit einem Punkt (.)
• Alle Animationsverhalten akzeptieren zwei Parameter:
• Ein Objekt im aktuellen DOM-Element, das animiert werden soll, ist entweder ein jQlite-Objekt, das geladen wurde, bevor jQuery es vor AngularJS geladen hat, oder ein jQuery-Objekt.
• Eine Rückruffunktion, wenn die Animation endet. Die der Anweisung entsprechende Aktion wird ausgesetzt, bis die Callback-Funktion aufgerufen wird.

Wir verfügen über mehrere JavaScript-Bibliotheken wie jQuery, Greensock, Anima und mehrere andere, die das Schreiben von Animationen vereinfachen. Der Einfachheit halber verwende ich in diesem Beitrag jQuery zum Erstellen von Animationen. Um mehr über mehrere andere Bibliotheken zu erfahren, können Sie deren entsprechende Websites besuchen.

NG-View bewegen lassen

Eine Animation, die für eine ng-view-Direktive verwendet wird, wird beim Wechseln der Ansichten in einer AngularJS-Anwendung ausgeführt.

Der folgende visuelle Effekt wird durch die Animation verursacht, wenn eine Ansicht angezeigt wird:

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);
 }
 };
});

Das Obige erzeugt einen Slide-In-Effekt, wenn eine Ansicht auf den Bildschirm gelangt. Die Methode done wird als Callback-Funktion übergeben. Dies soll anzeigen, dass die Animation beendet ist und das AngularJS-Framework nun mit der nächsten Aktion fortfahren kann.

Beachten Sie die Methode, in der die animate()-Methode aufgerufen wird. Wir müssen dieses Element nicht in ein jQuery-Objekt konvertieren, da jQuery vor dem Laden von AngularJS geladen wird.

Jetzt müssen wir diesen Animationseffekt auf die ng-view-Direktive anwenden. Obwohl die Animation in JavaScript definiert ist, verwenden wir konventionsgemäß ein Klassen-Tag, um sie auf die Zielanweisung anzuwenden.

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

NG-Repeat-Animation
Unter den Anweisungen, die Sie verwenden können, ist ng-repeat eine sehr wichtige Anweisung. Es gibt zwei grundlegende Bedienungsanweisungen: Filtern und Sortieren. Fügen Sie entsprechende Anweisungen basierend auf dem durchgeführten Vorgang hinzu, verschieben oder entfernen Sie sie.
In der folgenden Demonstration werden einige grundlegende Animationen verwendet. Wenn Änderungen auftreten, können Sie die entsprechenden Animationseffekte sehen.

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);
 }
 };
});

Ng-hide-Animation

Die ng-hide-Direktive wird verwendet, um die ng-hide-Stilklasse des Zielelements hinzuzufügen oder zu entfernen. Um eine Animation verwenden zu können, müssen wir häufig CSS-Stile hinzufügen oder entfernen. Übergeben Sie den Klassennamen an die Animationsklasse, um diesen Effekt zu erzielen. Dadurch können wir die Klasse untersuchen und entsprechende Änderungen am Code vornehmen.

Das Folgende ist ein Beispielcode für eine Animation, der die ng-hide-Direktive verwendet, um den Ausblendeffekt von Elementen zu erzielen:

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();
  }
 }
 };
});

Lassen Sie benutzerdefinierte Befehle ins Spiel kommen

Um benutzerdefinierte Anweisungen zu animieren, müssen wir den $animate-Dienst verwenden. Obwohl der $animate-Dienst Teil des Kernframeworks von AngularJS ist, muss ngAnimate geladen werden, damit dieser Dienst seine volle Rolle spielen kann.

Anhand des gleichen Beispiels aus dem vorherigen Artikel präsentieren wir eine einseitige Kursliste. Wir erstellen einen Befehl, um die Details des Kurses in einem Raster anzuzeigen. Der Inhalt des Rasters ändert sich, wenn auf den Link „Statistik anzeigen“ geklickt wird. Fügen wir eine Animation hinzu, um dem Benutzer diesen Übergang zu präsentieren.

Wenn die Übergangsanimation beginnt, fügen wir ein CSS-Klassen-Tag hinzu und wenn sie endet, entfernen wir das Klassen-Tag. Hier ist ein Beispielcode für diese Direktive:

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不够人性化。所以，必须小心并最优化的使用这件利器。