JavaScript -Animationen in AngularJS -Anwendungen

Kernpunkte

• AngularJS ist ein hervorragendes Framework zum Erstellen von Webanwendungen für einseitige Webanwendungen, und seine Animationsunterstützung ist eine der wichtigsten Funktionen. Mit JavaScript -Animationen können AngularJS -Anwendungen Animationseffekte hinzufügen.
• benutzerdefinierte Winkel -JavaScript -Animationen werden in der animation -Methode des Winkelmoduls definiert. Der Animationsname beginnt mit einem Punkt.
• Animation kann auf verschiedene AngularJS-Richtlinien wie NG-View, NG-Repeat, NG-Hide und benutzerdefinierte Richtlinien angewendet werden. Sie können beispielsweise Animationen in der NG-View-Anweisung hinzufügen, um visuelle Effekte zu erstellen, wenn der Benutzer zwischen Ansichten wechselt.
• Animation Während sie die Anwendung lebendiger machen kann, kann die Animation überbeansprucht werden, um die Anwendung zu verlangsamen und den Endbenutzer zu überwältigen. Daher sollte die Animation optimiert und strategisch verwendet werden.

AngularJS ist ein featurereiches Framework zum Erstellen von Webanwendungen für einseitige, die alle Funktionen bereitstellen, die Sie für die Erstellung von reichhaltigen und interaktiven Anwendungen benötigen. Eines der Hauptmerkmale von Angular ist die Unterstützung für die Animation.

Wir können einen Teil der Anwendung animieren, um Änderungen anzuzeigen, die auftreten. In meinem letzten Beitrag habe ich Unterstützung für CSS -Animationen in Winkelanwendungen eingeführt. In diesem Artikel lernen wir, wie Sie JavaScript verwenden, um AngularJS -Anwendungen Animationen hinzuzufügen.

In Angular ist der einzige Unterschied zwischen CSS und JavaScript -Animationen, wie sie definiert werden. Es gibt keinen Unterschied darin, wie definierte Animationen verwendet werden. Zunächst müssen wir das Nganimate -Modul in das Stammmodul der Anwendung laden.

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

Die Animationsereignisse, die in JavaScript -Animationen verarbeitet werden sollen, bleiben ebenfalls unverändert. Im Folgenden finden Sie eine Liste von Befehlen, die die Animation und ihre Ereignisse für verschiedene Operationen unterstützen:

Anweisungen Ereignisse ng-view Eingeben, verlassen Sie ng-include Geben Sie ng-switch ein, lassen Sie ng-if Eingabetaste, verlassen ng-repeat Eingeben, verlassen, verschieben Sie ng-show addieren Sie ng-hide add ng-classe hinzufügen, entfernen Sie Die obige Liste ist die gleiche wie die im vorherigen Beitrag, erwähnt jedoch nicht die entsprechenden CSS -Klassen, da wir sie nicht benötigen, um JavaScript -Animationen zu definieren. Diese Ereignisse werden nur generiert, wenn das Anwendungsmodul das Nganimate -Modul lädt. Lassen Sie uns nun sehen, wie man einige Richtlinien animiert.

benutzerdefinierte Winkelsyntax

Der grundlegende Framework der benutzerdefinierten JavaScript -Animation lautet wie folgt:

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

Die

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!