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

Beim Schreiben von JavaScript -Animationen in AngularJS denken Sie an die folgenden Punkte:

1. Der Animationsname beginnt mit einem Punkt (.).
2. Jede Animationsoperation akzeptiert zwei Parameter:
   • Ein Objekt, das das aktuelle DOM -Element ist, das die Animation anwendet. Wenn JQuery nicht vor AngularJS geladen ist, handelt es sich um ein JQLite -Objekt.
   • Die Rückruffunktion, die nach Abschluss der Animation aufgerufen wurde. Der Betrieb der Anweisung wird vor dem Aufrufen der Fertigfunktion durchgeführt.

Wir haben viele JavaScript -Bibliotheken wie JQuery, Greensock, Anima usw., die die Arbeit des Schreibens von Animationen vereinfachen. Der Einfachheit halber verwende ich JQuery, um Animationen in diesem Artikel zu erstellen. Um mehr über andere Bibliotheken zu erfahren, k?nnen Sie ihre jeweiligen Websites besuchen.

Animiert zu ng-view

Animes werden auf die NG-View-Anweisung angewendet, wenn der Benutzer zwischen Ansichten der AngularJS-Anwendung wechselt. Wie in der obigen Tabelle gezeigt, k?nnen wir Animationen hinzufügen, wenn die Ansicht eintritt oder geht. Es besteht keine Notwendigkeit, mit beiden F?llen umzugehen.

Die folgenden Animationen erzeugen einige visuelle Effekte, wenn die Ansicht in die Seite eintritt:

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

Der obige Code erstellt einen Gleiteffekt, wenn die Ansicht in die Seite eingeht. Die gemessene Methode wird als Rückruf übergeben. Dies soll darauf hinweisen, dass die Animation abgeschlossen ist und das Framework nun mit dem n?chsten Vorgang fortfahren kann.

Bitte beachten Sie, wie die animate() -Methode aufgerufen wird. Wir müssen Elemente nicht in JQuery -Objekte konvertieren, da die JQuery -Bibliothek vor AngularJS geladen wird.

Jetzt müssen wir diese Animation auf die NG-View-Anweisung anwenden. Obwohl die Animation in JavaScript definiert ist, verwenden wir durch Konvention Klassen in der Zielanweisung, um sie anzuwenden.

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

Animiert zu ng-repeat

ng-repeat ist eine der wichtigsten Anweisungen, die viele Optionen bietet. Die beiden grundlegenden Operationen dieser Anweisung sind Filtern und Sortieren. Abh?ngig von der Art des durchgeführten Betriebs werden Elemente unter der Anweisung hinzugefügt, gel?scht oder verschoben.

Wenden wir einige grundlegende Animationen an, damit der Benutzer bei ?nderungen erkennen kann.

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

Animiert zu ng-hide

ng-Hide-Anweisung fügt die NG-Hide-CSS-Klasse im Zielelement hinzu oder beseitigt sie. Um Animationen anzuwenden, müssen wir die Situation bew?ltigen, in der wir CSS -Klassen hinzufügen und l?schen. Der Klassenname wird an die Animations -Handlerklasse übergeben. Auf diese Weise k?nnen wir die Klasse überprüfen und geeignete Ma?nahmen ergreifen.

Folgendes ist ein Animationscode-Beispiel, das in Elemente verwandelt oder in Elemente verblasst, wenn die NG-Hide-Anweisung aktiviert oder deaktiviert wird:

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

Fügen Sie animierte benutzerdefinierte Befehle hinzu

Um benutzerdefinierte Anweisungen Animationen hinzuzufügen, müssen wir den $animate -Dienst verwenden. Obwohl $animate Teil des AngularJS -Kerngerüsts ist, sollte Nganimate geladen werden, um den Dienst zu nutzen.

mit derselben Demo wie im vorherigen Beitrag werden wir eine Seite mit einer Liste von Kursen anzeigen. Wir erstellen eine Richtlinie, in der die Details des Kurses in einem Feld angezeigt werden. Nach dem Klicken auf den Link "Statistik anzeigen" ?ndert sich der Inhalt des Feldes. Fügen wir eine Animation hinzu, damit der Benutzer den übergang sehen kann.

Wenn der übergang auftritt, werden wir eine CSS -Klasse hinzufügen, die wir nach Abschluss der Animation l?schen werden. Hier ist der Code für diese Richtlinie:

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

Wie Sie sehen, führen wir die Aktion aus, nachdem die Animation abgeschlossen ist. Beim überprüfen der Direktivenelemente in Browser-Entwickler-Tools werden wir feststellen, dass die Klassenschalt- und Switching-ADD sehr schnell hinzugefügt und entfernt werden. Wir k?nnen CSS -überg?nge definieren oder JavaScript -Animationen anpassen, um die Animationen zu sehen, die stattfinden. Hier ist ein Beispiel für den CSS -übergang, der mit den oben genannten Anweisungen verwendet werden kann (für die Kürze werden Anbieter -Pr?fixe weggelassen):

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

oder Folgendes ist eine JQuery -Animation, die für denselben Anweisungen verwendet werden kann:

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

Eine dieser Animationen kann auf benutzerdefinierte Anweisungen angewendet werden, genau wie wir Animationen auf integrierte Richtlinien anwenden.

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

Sie k?nnen die tats?chlichen Auswirkungen aller oben genannten Animationen auf der Demo -Seite anzeigen.

Schlussfolgerung

Animation kann die Anwendung lebhafter machen, wenn sie ordnungsgem?? und funktional verwendet werden. Wie wir sehen k?nnen, unterstützt AngularJS CSS und JavaScript -Animationen reichlich. Sie k?nnen eine davon basierend auf der Situation des Teams ausw?hlen.

Ein starker Einsatz von Animation kann jedoch dazu führen, dass die Anwendung verlangsamt wird und die Anwendung für den Endbenutzer überentrede zu werden. Daher muss diese Waffe mit Vorsicht und Optimierung eingesetzt werden.

FAQs über JavaScript -Animationen in AngularJS -Anwendungen (FAQ)

Wie erstelle ich grundlegende Animationen in AngularJs?

Erstellen einer grundlegenden Animation in AngularJs umfasst mehrere Schritte. Zun?chst müssen Sie die AngularJS -Animationsbibliothek in Ihr Projekt aufnehmen. Dies kann erreicht werden, indem ein Verweis auf die Datei "Angular-Animate.js" in der HTML-Datei hinzugefügt wird. Als n?chstes müssen Sie das "Nganimate" -Modul in Ihre AngularJS -Anwendung injizieren. Dies kann erreicht werden, indem "nganimat" als Abh?ngigkeit im Anwendungsmodul hinzugefügt wird. Nachdem Sie dies getan haben, k?nnen Sie Animationen mit der CSS -Klasse und der AngularJS -Anweisung erstellen. Beispielsweise k?nnen Sie die Klassen "NG-Enter" und "NG-Leave" verwenden, um ein Element zu animieren, wenn es eintritt oder das DOM verl?sst.

Was sind die Schlüsselkomponenten der AngularJS -Animation?

AngularJS -Animation besteht haupts?chlich aus zwei Schlüsselkomponenten: CSS und JavaScript. CSS wird verwendet, um den Stil und die überg?nge von Animationen zu definieren, w?hrend JavaScript verwendet wird, um die Zeit und Reihenfolge der Animationen zu steuern. In AngularJs werden Animationen erstellt, indem CSS-Klassen mit spezifischen AngularJS-Richtlinien wie "NG-Repeat", "NG-Switch" und "NG-View" in Verbindung gebracht werden. Diese Direktiven fügen und l?schen zu dem richtigen Zeitpunkt automatisch die zugeh?rigen CSS -Klassen, sodass Sie komplexe Animationen mit minimalem JavaScript -Code erstellen k?nnen.

Wie kann man die Zeit der Animation in AngularJs kontrollieren?

CSS -überg?nge und Animationen k?nnen verwendet werden, um die Zeit der Animationen in AngularJs zu steuern. Indem Sie die Attribute "übergangsdauer" oder "Animationsdauer" in der CSS-Klasse angeben, k?nnen Sie steuern, wie lange die Animation dauert. Darüber hinaus k?nnen Sie die Attribute "übergangs-Delay" oder "Animation-Delay" verwenden, um die Startzeit der Animation zu steuern. Diese Eigenschaften k?nnen in Sekunden (n) oder Millisekunden (MS) angegeben werden.

Kann ich mit JavaScript Animationen in AngularJs erstellen?

Ja, Sie k?nnen Animationen in AngularJs mit JavaScript erstellen. W?hrend CSS h?ufig für einfache Animationen verwendet wird, kann JavaScript für komplexere Animationen verwendet werden, die eine pr?zise Kontrolle über das Timing und die Reihenfolge der Animationen erfordern. In AngularJS k?nnen Sie Animationen mit dem "$ Animate" -Dienst programmgesteuert steuern. Dieser Dienst bietet Methoden zum Hinzufügen, L?schen und Abfragen von CSS -Klassen, sodass Sie komplexe Animationen mit JavaScript erstellen k?nnen.

Wie k?nnen Elemente beim Betreten oder Verlassen des DOM in AngularJs animiert werden?

In AngularJs k?nnen Sie die Klassen "Ng-Enter" und "NG-Leave" verwenden, um ein Element zu animieren, wenn es eintritt oder das DOM verl?sst. AngularJS fügt diese Klassen automatisch hinzu und entfernt, wenn Elemente das DOM eingeben oder lassen. Durch das Definieren von CSS -überg?ngen oder -Animationen für diese Klassen k?nnen Sie Animationen erstellen, die ausl?sen, wenn ein Element eingeht oder das DOM verl?sst.

Wie kann man AngularJS-Animation mit "NG-Repeat" verwenden?

Sie k?nnen AngularJS-Animation mit "NG-Repeat" verwenden, indem Sie die CSS-Klasse mit der Anweisung "NG-Repeat" verknüpfen. Wenn ein Element aus der Liste der "NG-Repeat" hinzugefügt oder entfernt wird, fügt AngularJS die zugeh?rige CSS-Klasse automatisch hinzu und entfernt und l?st die entsprechende Animation aus. Beispielsweise k?nnen Sie die Klassen "NG-Enter" und "NG-Leave" verwenden, um das Projekt zu animieren, wenn es zu einer Liste hinzugefügt oder ausgenommen wird.

Kann ich AngularJS-Animation mit "ng-switch" verwenden?

Ja, Sie k?nnen AngularJS-Animation mit "ng-switch" verwenden. ?hnlich wie bei "NG-Repeat" k?nnen Sie eine CSS-Klasse mit der "NG-Switch" -Richtlinie in Verbindung bringen, um eine Animation zu erstellen. Wenn sich der Zustand "ng-switch" ?ndert, fügt AngularJS die zugeh?rige CSS-Klasse automatisch hinzu und l?scht die entsprechende Animation.

Wie kann man AngularJS-Animation mit "ng-view" verwenden?

Sie k?nnen AngularJS-Animation mit "NG-View" verwenden, indem Sie die CSS-Klasse mit der Anweisung "NG-View" in Verbindung bringen. Wenn sich die Ansicht ?ndert, fügt AngularJS die zugeh?rige CSS -Klasse automatisch hinzu und l?scht und l?st die entsprechende Animation aus. Dies kann verwendet werden, um Seitenübergangsanimationen in AngularJS -Anwendungen zu erstellen.

Kann ich AngularJS -Animationen mit benutzerdefinierten Anweisungen verwenden?

Ja, Sie k?nnen AngularJS -Animationen mit benutzerdefinierten Anweisungen verwenden. Durch die Verwendung des "$ Animate" -Dienstes in der Linkfunktion der Richtlinie k?nnen Sie CSS -Klassen programmgesteuert hinzufügen, l?schen und abfragen, um komplexe Animationen mit JavaScript zu erstellen.

Wie kann man AngularJS -Animation debuggen?

Sie k?nnen Browser -Entwickler -Tools verwenden, um AngularJS -Animationen zu debuggen. Durch die überprüfung der Animationselemente im DOM k?nnen Sie sehen, welche CSS -Klassen AngularJS hinzugefügt und entfernen. Darüber hinaus k?nnen Sie die Animation mithilfe der "aktivierten" Methode des "$ Animate" -Dienstes aktivieren oder deaktivieren, der für das Debuggen sehr nützlich ist.

Das obige ist der detaillierte Inhalt vonJavaScript -Animationen in AngularJS -Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!