Kernpunkte

• AngularJS unterstützt CSS- und JavaScript -Animationen. Es wird empfohlen, CSS -Animationen zu verwenden, da der Browser seine Priorit?t verringert und die Verarbeitungsf?den nicht blockiert.
• Um Animationen in AngularJs zu verwenden, müssen Sie die Bibliothek angular-animate.js und das ngAnimate -Modul als Abh?ngigkeit hinzufügen. Diese Bibliothek fügt Animationsunterstützung für Anweisungen wie ng-view, ng-repeat, ng-show, ng-hide und ng-class hinzu.
• Animation kann die Benutzererfahrung verbessern, indem übergangseffekte verbessert, Element?nderungen hervorgehoben und die Elementanzeige gesteuert werden. Sie k?nnen mit bestimmten Klassen und Eigenschaften in CSS angewendet werden und k?nnen angepasst werden, um einzigartige Effekte zu erzielen.

AngularJS ist so konzipiert, dass sie reichhaltige Webdatenbindungsanwendungen erstellen. Animate Diese Apps sind wie Zutaten zu Ihrer Lieblingspizza hinzuzufügen. Die Animation versch?nert nicht nur die Benutzeroberfl?che, sondern erleichtert den Benutzern auch die Verwendung. Eine kleine Animation in einer Anwendung kann ihren Reichtum erh?hen, was in anderen F?llen schwer zu erreichen ist.

Mit der Leistung des Netzwerks gibt es jetzt viele M?glichkeiten, Animationen zu erstellen. Bis vor kurzem wurden Animationen nur über JavaScript implementiert. Aber jetzt unterstützen alle Mainstream -Browser CSS3 gut. Wir k?nnen CSS nur verwenden, um unsere Website zu animieren.

AngularJS 1.1.5 Beta -Version unterstützt die Animation. Es ging viele ?nderungen durch, bevor die stabile Version des Features in AngularJS 1.2 ver?ffentlicht wurde. Es ist sehr einfach, Animationsunterstützung in Winkelanwendungen hinzuzufügen oder zu entfernen. Diese Bibliothek unterstützt sowohl CSS-basierte als auch JavaScript-basierte Animationen hervorragend. Obwohl Animationen in JavaScript geschrieben werden k?nnen, wird CSS -Animation empfohlen. Dies liegt daran, dass Browser die Priorit?t von CSS -Animationen reduzieren und die Verarbeitungsf?den nicht blockieren, wenn Threads wichtige Aktionen ausführen k?nnen.

In diesem Artikel werden wir lernen, wie man CSS-Animationen verwendet, um das Verhalten von AngularJS-integrierten Richtlinien attraktiver zu machen. Der Umfang dieses Artikels enth?lt keine von CSS unterstützten Animationsfunktionen. Weitere Informationen finden Sie im CSS -Kanal auf SitePoint.

Anf?nger

Um Animation zu verwenden, müssen wir die angular-animate.js Bibliothek einbeziehen und das ngAnimate -Modul als Abh?ngigkeit im Modul wie unten gezeigt hinzufügen:

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

Diese Bibliothek fügt Animationsunterstützung für bestimmte Ereignisse in den folgenden Anweisungen hinzu:

Diese Ereignisse werden automatisch generiert, wenn ?nderungen am Anweisungszustand auftreten. Es ist zu beachten, dass diese Ereignisse nur dann generiert werden, wenn das ngAnimate -Modul als Abh?ngigkeit des Anwendungsmoduls übergeben wird. Wenn diese Ereignisse abgefeuert werden, fügen sie dem angewandten Element eine CSS -Klasse hinzu. Der entsprechende Name der CSS -Klasse wird in der obigen Tabelle erw?hnt. Wie Sie sehen k?nnen, k?nnen wir definieren, was passiert, wenn und nach dem Ereignis auftritt.

ng-view Animation

Wenn der Benutzer von einer Ansicht zur anderen navigiert, wird die Route auf dem Client aufgel?st und ein Teil der Seite l?dt neue Inhalte. Dies geschieht sehr schnell und manchmal kann der Benutzer das Gefühl haben, dass die Ansicht zu pl?tzlich ist. Die Animation in diesem Schritt wird den übergang gl?tten.

Siehe die obige Tabelle, wir sehen, dass ng-view zwei Ereignisse ansteigern, wenn sich die Ansicht ?ndert. Wenden wir den folgenden Stil an, wenn sich die Ansicht ?ndert:

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

Das obige CSS wendet einen lockeren übergang zu den angewandten Elementen mit einer übergangsdauer von 1 Sekunde an. Die obigen Stile allein haben jedoch keinen Einfluss, da wir nicht angeben, welches Attribut des Elements sich w?hrend des übergangs ?ndern kann. Manipulieren wir die Werte einiger CSS -Attribute:

.view-slide-in.ng-enter {
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;

  opacity: 0.5;
  position: relative;
  opacity: 0;
  top: 10px;
  left: 20px;
}

Was wir jetzt tun müssen, ist, die view-fade -Klasse auf die ng-view -Richtlinie anzuwenden.

.view-slide-in.ng-enter {
  opacity: 0;
}
.view-slide-in.ng-enter.ng-enter-active {
  top: 0;
  left: 0;
  opacity: 1;
}
.view-slide-in.ng-leave.ng-leave-active {
  top: 5px;
  left: 5px;
  opacity: 1;
}
.view-slide-in.ng-leave {
  top: 0;
  left: 0;
  opacity: 0;
}

Wenn Sie jetzt von einer Ansicht zur anderen navigieren, k?nnen Sie den Gleiteffekt sehen. Sie k?nnen überg?nge anwenden und sogar Ihre eigene Keyframe -Animation definieren. Sie k?nnen View -überg?nge in Ihrer Demo verwenden, um ein besseres Verst?ndnis zu erhalten.

ng-repeat Animation

Es ist fast unm?glich, in AngularJS -Anwendungen ng-repeat zu vermeiden. Am Ende verwenden wir die meisten Funktionen dieser Richtlinie, z. B. das Aktualisieren von Modellen, das Hinzufügen oder Entfernen von Elementen zu Sammlungen, die Anwendung von Sortier- und Filtern von Elementen. W?hrend wir diese Operationen ausführen, werden die Elemente in der Richtlinie st?ndig bewegt und ge?ndert.

Lassen Sie uns lineare überg?nge auf die Opazit?t des Elements anwenden, um die ?nderungen des Projekts anzuzeigen.

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

Wenn wir nun etwas auf der Liste tun, werden wir eine Mischung aus dem Gegenstand verblassen und den leichten Jitter -Effekt. Dieser Effekt wird durch ?ndern des Wertes des Positionsattributs auf der linken Seite des Projekts in der oben erstellten ng-move -Klassungen verursacht. Wenden Sie eine zuf?llige Filterung und Sortierung auf die Elementliste in der Demo an und beobachten Sie das Verhalten der Elemente.

ng-hide Animation

ng-hide Animation ?hnelt der ng-view -Animation. Der einzige Unterschied besteht darin, dass wir die Klassen ng-add und ng-remove anstelle von ng-enter und ng-leave anwenden müssen. Lassen Sie uns das Projekt verblassen oder herausverfolgen, wenn die ng-hide -Richtlinie es zeigt oder versteckt. Die gleiche Animation kann auf ng-show angewendet werden, indem das Ereignis invertiert wird.

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
  -webkit-transition: all linear 1s;
  -moz-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;

  position: relative;
  left: 5px;
}
.repeat-animation.ng-enter {
  opacity: 0;
}
.repeat-animation.ng-enter.ng-enter-active {
  opacity: 1;
}
.repeat-animation.ng-leave {
  opacity: 1;
}
.repeat-animation.ng-leave.ng-leave-active {
  opacity: 0;
}
.repeat-animation.ng-move {
  left: 2px;
  opacity: 0.5;
}
.repeat-animation.ng-move.ng-move-active {
  left: 0;
  opacity: 1;
}

diese Animation in der Demo anzeigen. Das Kontrollk?stchen auf der rechten Seite der ersten Seite verbirgt einige Elemente in den Duplikaten.

Schlussfolgerung

Wenn Webbrowser immer leistungsf?higer werden, erwarten unsere Kunden, dass wir diese Funktionen optimal nutzen und Qualit?tsprodukte für sie liefern. Animationsunterstützung in CSS ist eine sehr beliebte Funktion. Das Schreiben und Verwenden von Animationen mit CSS ist viel einfacher als ein paar Zeilen JavaScript -Code zu schreiben, um dasselbe zu erreichen. Ich hoffe, Sie finden dieses Tutorial nützlich und freuen uns auf Ihr Feedback.

FAQs beim Hinzufügen von CSS -Animationen in AngularJS -Anwendungen

(Der FAQ-Teil wird hier weggelassen, da der Artikel zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Der Inhalt des FAQ-Teils ist dem ursprünglichen Text sehr ?hnlich, und Pseudooriginal ist schwierig. Wenn Sie also den Pseudooriginal-Effekt beibehalten, wird dies

Das obige ist der detaillierte Inhalt vonHinzufügen von CSS -Animationen zu AngularJS -Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!