Share
Bei richtiger Verwendung können Animationen dazu führen, dass eine Webanwendung Spaß macht. Moderne Browser können verschiedene Elemente auf einer Webseite mit nur CSS animieren. Wenn Sie AngularJS in einem Ihrer Projekte verwenden, können Sie auch das Modul ngAnimate verwenden, um auf Angular-Art Animationen hinzuzufügen.
Mit dem Modul ngAnimate können Sie CSS- und JavaScript-basierte Animationen zu Ihren Projekten hinzufügen. Die CSS-basierten Animationen enthalten Keyframes und Übergänge. Die JavaScript-basierten Animationen müssen mit registriert werden module.animation (). In diesem Lernprogramm erfahren Sie, wie Sie CSS-Animationen zu integrierten, animationsabhängigen AngularJS-Anweisungen hinzufügen, um Ihre Anwendungen ansprechender zu gestalten.
Das erste, was Sie tun müssen, um Animationen hinzuzufügen, ist include winkelanimation.js in Ihrem Projekt. Wenn Sie fertig sind, können Sie das ngAnimate-Modul als Abhängigkeit in Ihre App aufnehmen, um die Animation verschiedener Elemente zu starten.
Accentsconagua
angle.module ('app', ['ngAnimate']);Im Folgenden finden Sie eine Liste mit verschiedenen animationsabhängigen Anweisungen und den Animationsereignissen, mit denen Sie sie animieren können:
Wiederholung kann erkennen eingeben, verlassen und Bewegung Veranstaltungen.ng-view, ng-include, ng-Schalter und ng-if kann erkennen eingeben und verlassen Veranstaltungen.ng-show, ng-hide und ng-klasse kann erkennen hinzufügen und Löschen Veranstaltungen.ng-nachricht kann auch erkennen eingeben und verlassen Veranstaltungen.Sie sollten sich daran erinnern, dass diese Animations-Hooks standardmäßig nicht aktiviert sind. Sie werden erst aktiv, wenn Sie Ihrer App das ngAnimate-Modul hinzugefügt haben.
Die Direktive ng-if in AngularJS wird verwendet, um basierend auf dem Wert eines bestimmten Ausdrucks Elemente zum DOM hinzuzufügen oder daraus zu entfernen. Wenn der Ausdruck zu auswertet falsch, Das Element wird aus dem DOM entfernt. Wenn der Ausdruck zu auswertet wahr, Ein Klon des Elements wird wieder in das DOM eingefügt. Dieses Hinzufügen und Entfernen von Elementen erfolgt sofort. Sie können jedoch die Elemente, die entfernt oder neu erstellt werden, mit dem Modul ngAnimate animieren.
Wenn die Elemente zum DOM hinzugefügt werden, können Sie das verwenden ng-enter und ng-enter-aktiv Klassen, um sie zu animieren. Der Übergangscode sowie der Startanimationsstatus werden innerhalb von hinzugefügt ng-enter Klasse. Der endgültige Animationsstatus wird innerhalb von hinzugefügt ng-enter-aktiv Klasse. Hier ist der Code, um einige rote Balken anzuzeigen, indem ihre Höhe animiert wird.
.red-bar.ng-enter Übergang: alle Leichtigkeit in 0.25s; Höhe: 0px; .red-bar.ng-enter.ng-enter-active height: 30px;
In ähnlicher Weise können Sie auch eine Animation anwenden, um die Balken mithilfe von zu verbergen ng-lassen und das ng-Leave-Aktiv Klassen. Ich habe die Animation zum Entfernen der roten Balken ausgelassen, so dass Sie den Unterschied zwischen animierten und nicht animierten Zuständen deutlich erkennen können.
Die ng-view-Direktive in AngularJS wird als Container verwendet, um einen Teil der Seite neu zu laden, wenn der Benutzer zwischen verschiedenen Ansichten wechselt.
Genauso wie das Hinzufügen und Entfernen von Elementen mit ng-if, Dieser Vorgang läuft auch sehr schnell ab. Wenn Sie das Eintragen und Verlassen verschiedener Elemente in der Ansicht animieren möchten, können Sie dasselbe alte Element verwenden ng-enter, ng-enter-aktiv, ng-lassen, und ng-Leave-Aktiv Klassen.
Neben diesen vier Klassen gibt es auch eine ng-animieren Klasse. Im Verlauf der Animation wird diese Klasse auch zu allen Elementen hinzugefügt, die animiert werden müssen. Sie können es verwenden, um alle CSS-Regeln anzugeben, die im Verlauf der Animation gelten müssen. Hier ist ein Beispiel:
.planet-view.ng-animieren Übergang: alle Leichtigkeit 0.4s; Position: absolut; .planet-view.ng-enter top: 200px; Deckkraft: 0; .planet-view.ng-leave, .planet-view.ng-enter.ng-enter-active top: 0; Deckkraft: 1; .planet-view.ng-leave.ng-leave-active top: -200px; Deckkraft: 0;
Wie Sie im obigen Code sehen können, wurde für alle Eigenschaften eine Übergangszeit von 0,4 Sekunden angewendet. Wenn die Informationen für einen bestimmten Planeten in die Ansicht eintreten, beginnt sie mit einer Opazität von Null und der oben Position auf 200px eingestellt. Gleichzeitig haben die Elemente, die dabei sind, die Ansicht zu verlassen, eine Deckkraft von 1.
Am Ende des Übergangs erreichen die Eingabeelemente die oberste Position der Ansicht und werden vollständig undurchsichtig. In ähnlicher Weise animieren die Austrittselemente zu einer Position 200px über der Ansicht und verblassen. Dies gibt uns einen schönen Effekt, bei dem die Informationen am unteren Rand der Seite eingeblendet und am oberen Rand der Seite ausgeblendet werden.
Im Folgenden ng-view Demo, klicken Sie auf den Namen der verschiedenen Planeten, um das zu sehen eingeben und verlassen Animationen in Aktion.
Die Informationen zur atmosphärischen Zusammensetzung von terrestrischen Planeten wurden dieser Seite entnommen.
Die Anweisung ng-repeat in AngularJS wird verwendet, um eine Vorlage einmal pro Element in einer bestimmten Sammlung zu instanziieren. Diese Anweisung wird verwendet, wenn Sie Elemente einer Sammlung sortieren, filtern, hinzufügen oder entfernen möchten. Es gibt drei Animationsereignisse, mit denen ausgelöst werden kann Wiederholung.
In den letzten beiden Abschnitten haben Sie CSS-Übergänge zum Animieren verschiedener Elemente verwendet. In diesem Abschnitt erfahren Sie, wie Sie verschiedene Elemente mithilfe einer Keyframe-Animation animieren. Ich werde den Code sowohl für die Übergangs- als auch für die Keyframe-Animation bereitstellen, damit Sie den Unterschied zwischen den beiden sehen können.
Hier ist der Übergangscode zum Animieren der Elemente:
.task-item.ng-enter, .task-item.ng-leave Übergang: alle linearen 0,25s; .task-item.ng-leave top: 0; Deckkraft: 1; .task-item.ng-leave.ng-leave-active top: 200px; Deckkraft: 0; .task-item.ng-enter Deckkraft: 0; oben: -500px; .task-item.ng-enter.ng-enter-active Deckkraft: 1; oben: 0px;
Wie Sie sehen, ähnelt dieser Code dem Übergangscode, den wir bisher verwendet haben. Die Startzustände sind in definiert ng-enter und ng-lassen. Die Endzustände sind in definiert ng-enter-aktiv und ng-Leave-Aktiv.
Mit dem folgenden Code wird derselbe Effekt mithilfe von Keyframe-Animationen wiederhergestellt.
@keyframes hinzugefügt von Deckkraft: 0; oben: -500px; bis Deckkraft: 1; oben: 0px; @keyframes gelöscht von top: 0; Deckkraft: 1; zu top: 200px; Deckkraft: 0; .task-item.ng-enter animation: 0.25s hinzugefügt; .task-item.ng-leave Animation: 0.25s gelöscht;
Dieses Mal verwenden wir das CSS Animation Eigenschaft, um die Animation hinzuzufügen. Die eigentliche Animation wird mit definiert @keyframes. Der Anfangs- und Endzustand verschiedener Elemente wurde in den Keyframes selbst definiert. Bitte beachten Sie, dass wir das nicht verwenden müssen ng-enter-aktiv und ng-Leave-Aktiv Unterricht mehr. Die Verwendung von Keyframes hat den Vorteil, dass die Animation jetzt viel komplizierter ist als ein einfacher Übergang.
Versuchen Sie, einige Aufgaben in der folgenden Demo hinzuzufügen und zu löschen, um die Animation in Aktion zu sehen.
Envato Tuts + hat außerdem ein Tutorial zur Validierung Ihrer Formulare mit ngMessages veröffentlicht. Im letzten Abschnitt dieses Tutorials haben Sie erfahren, wie Fehlermeldungen nur angezeigt werden, nachdem ein Benutzer ein Eingabefeld berührt hat. Alle Fehlermeldungen in diesem Lernprogramm werden sofort angezeigt und verschwinden.
Wenn Sie eine subtile Animation hinzufügen möchten, um die Fehlermeldungen anzuzeigen oder auszublenden, können Sie dies einfach mit dem Modul ngAnimate tun. Wie zu Beginn dieses Tutorials erwähnt, ng-nachricht kann erkennen eingeben und verlassen Veranstaltungen. Das bedeutet, dass Sie das verwenden können ng-enter und ng-enter-aktiv Klassen, um den Anfangs- und Endstatus der Fehlermeldungen anzugeben, die den Benutzern aktuell angezeigt werden. Ebenso können Sie das verwenden ng-lassen und ng-Leave-Aktiv Klassen, um den Anfangs- und Endstatus von Fehlernachrichten anzugeben, die gerade vor den Benutzern verborgen werden.
Hier ist ein Beispiel zum Ändern der Opazitätseigenschaft für Fehlermeldungen.
.error-msg.ng-enter Übergang: 0.5s linear alle; Deckkraft: 0; .error-msg.ng-enter.ng-enter-active Deckkraft: 1;
Ich habe ein hinzugefügt Fehler-msg Klasse zu allen Fehlermeldungen, und Sie können Ihre eigenen Klassen hinzufügen und den Code entsprechend aktualisieren. In diesem Fall habe ich keine Animationen von Fehlermeldungen angewendet, die ungültig geworden sind und den Benutzern nicht mehr angezeigt werden sollten. Dies bedeutet, dass sie sofort verschwinden. Hier ist die Demo, die zeigt, wie ngMessages und ngAnimate zusammen verwendet werden.
In diesem Lernprogramm wurde beschrieben, wie Sie mithilfe des Moduls ngAnimate Ihren AngularJS-Webanwendungen Animationen hinzufügen. Sie haben auch gelernt, verschiedene Animationen basierend auf dem auslösenden Ereignis auf ein Element anzuwenden. Der letzte Abschnitt befasste sich mit der Verwendung des ngAnimate-Moduls in Verbindung mit anderen Modulen wie ngMessages, um Fehlermeldungen zu animierten Animationen hinzuzufügen.
Eine Sache, die Sie bei der Verwendung von Animationen beachten müssen, ist, dass Sie sie nicht übermäßig nutzen sollten. Zu viele Animationen können die Benutzer von der Hauptfunktion der App ablenken. Verwenden Sie Animationen nur, wenn Sie der Meinung sind, dass sie die Benutzererfahrung tatsächlich verbessern können.
Ich hoffe, dir hat dieses Tutorial gefallen. Wenn Sie Tipps, Anregungen oder Fragen zum ngAnimate-Modul haben, kommentieren Sie dies bitte.
