AngularJS -Animation
AngularJS liefert Animationseffekte, die mit CSS verwendet werden können.
AngularJS verwendet Animationen, um die Angular-Animate.min.js-Bibliothek einzuführen.
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script>
Sie müssen auch das Modell Nganimate in Ihrer Anwendung verwenden:
<Body Ng-App = "Nganimate">
Was ist Animation?
Animation ist ein dynamischer Veränderungseffekt, der durch Ändern von HTML -Elementen erzeugt wird.
Beispiel
Aktivieren Sie das Kontrollkästchen, um DIV auszublenden:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <style> div {Transition: Alle linear 0,5s; Hintergrundfarbe: hellblau; Höhe: 100px; Breite: 100%; Position: Relativ; Top: 0; links: 0;}. ng-hide {Höhe: 0; Breite: 0; Hintergrundfarbe: transparent; Oben: -200px; Links: 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> <h1> div: <input type = "checkbox" ng-model = "myCheck"> </h1> ng-hide = "myCheck"> </div> </body> </html>Laufeffekt:
Hinweis: In der Anwendung sollten nicht zu viele Animationen vorhanden sein, aber eine angemessene Verwendung von Animationen kann den Reichtum der Seite erhöhen und den Benutzern das Verständnis erleichtern.
Wenn unsere Anwendung den Anwendungsnamen bereits festgelegt hat, können wir Nganimimat direkt zum Modell hinzufügen:
Beispiel
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <style> div {Transition: Alle linear 0,5s; Hintergrundfarbe: hellblau; Höhe: 100px; Breite: 100%; Position: Relativ; Top: 0; links: 0;}. ng-hide {Höhe: 0; Breite: 0; Hintergrundfarbe: transparent; Oben: -200px; Links: 200px;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "myapp"> <h1> div: <input type = "checkbox" ng-model = "myCheck"> </h1> </h1> ng-hide = "myCheck"> </div> <script> var app = angular.module ('myapp', ['nganimate']); </script> </body> </html>Laufeffekt:
Was hat Nganimate getan?
Das Nganimate -Modell kann die Klasse hinzufügen oder entfernen.
Das Nganimate -Modell kann HTML -Elemente nicht animieren, aber Nganimate wird Ereignisse überwachen, ähnlich wie das Versteck und die Anzeige von HTML -Elementen. Wenn ein Ereignis auftritt, verwendet Nganimate eine vordefinierte Klasse, um HTML -Elemente zu animieren.
AngularJS -Anweisung zum Hinzufügen/Entfernen der Klasse:
ng-show
Ng-Hide
NG-Klasse
NG-View
ng-include
NG-Wiederholung
Ng-wenn
Ng-Switch
Die NG-Show- und NG-Hide-Direktiven werden verwendet, um den Wert der NG-Hide-Klasse hinzuzufügen oder zu entfernen.
Andere Richtlinien fügen die NG-Ein-Einheit-Klasse beim Eingeben des DOM hinzu und entfernen die DOM werden die NG-Leave-Eigenschaft hinzufügen.
Wenn sich die HTML-Elementposition ändert, kann die NG-Repeat-Anweisung auch die NG-Mov-Klasse hinzufügen.
Nach Abschluss der Animation wird die Klassensammlung von HTML -Elementen entfernt. Zum Beispiel: Die NG-Hide-Anweisung fügt die folgende Klasse hinzu:
Ng-Animate
Ng-Hide-Animate
ng-hide-add (wenn das Element versteckt ist)
NG-Hide-Remove (wenn das Element angezeigt wird)
ng-hide-add-aktiv (wenn das Element verborgen wird)
ng-hide-remove-aktiv (wenn das Element angezeigt wird)
Verwenden von CSS -Animation
Wir können CSS -Übergang oder CSS -Animation verwenden, um HTML -Elemente animiert zu machen. Sie können sich auf unser CSS -Übergangstutorial und das CSS -Animations -Tutorial beziehen.
CSS -Übergang
Mit dem CSS -Übergang können wir einen CSS -Attributwert für einen anderen reibungslos ändern:
Beispiel
Wenn das DIV-Element den Set von .ng-Hide-Klasse hat, dauert der Übergang 0,5 Sekunden und die Höhe ändert sich von 100px auf 0:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <style> div {Transition: Alle linear 0,5s; Hintergrundfarbe: hellblau; Höhe: 100px;}. ng-hide {Höhe: 0;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "myapp"> <h1> div: <input type = "checkbox" ng-model = "myCheck"> </h1> </h1> ng-hide = "myCheck"> </div> <script> var app = angular.module ('myapp', ['nganimate']); </script> </body> </html>CSS -Animation
Mit CSS -Animation können Sie die CSS -Eigenschaftswerte reibungslos ändern:
Beispiel
Wenn die .ng-Hide-Klasse auf das DIV-Element eingestellt ist, wird die Mychange-Animation ausgeführt, wodurch die Höhe von 100px auf 0 reibungslos ändert:
<! DocType html> <html> <head> <meta charset = "utf-8"> <style> @keyframes mychange {von {Höhe: 100px; } bis {Höhe: 0; }} div {Höhe: 100px; Hintergrund-Color: Lightblue;} div.ng-hide {Animation: 0.5s mychange;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script></head><body ng-app="ngAnimate">Hide DIV: <input type="checkbox" ng-model="myCheck"><div ng-hide = "myCheck"> </div> </body> </html>Das obige ist eine Sammlung von Informationen zu AngularJS -Animationen. Bitte beachten Sie es, wenn Sie es brauchen.