Hinzufügen von CSS -Animationen zu AngularJS -Anwendungen

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!