Vorwort
AngularJS liefert Animationseffekte, die mit CSS verwendet werden können. AngularJS erfordert die Einführung angular-animate.min.js -Bibliothek bei der Verwendung von Animation.
<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">
1. Was ist Animation?
Animation ist ein dynamischer Veränderungseffekt, der durch Ändern von HTML -Elementen erzeugt wird.
<! 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 = "js/angular.min.js"> </script> <script src = "JS/Angular-Animate.min.js"> </script> </head> <body ng-app = "nganimat"> <h3> hadern div: <input type = "schick" ng-model ng-hide = "myCheck"> </div> </body> </html> Wenn unsere Anwendung den Anwendungsnamen festgelegt hat, können wir ngAnimate direkt zum Modell hinzufügen:
<! 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 = "js/angular.min.js"> </script> <script src = "JS/Angular-Animate.min.js"> </script> </head> <body ng-app = "myApp"> <h3> hide div: <Eingabe type = "poktex" -Antbox "ng-model ng-hide = "myCheck"> </div> <script> var app = angular.module ('myapp', ['nganimate']); </script> </body> </html>2. 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 -Direktiven zum Hinzufügen/Entfernen der Klasse: ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch .
(1) Die NG-Klasse gibt die CSS-Klasse an, die von HTML-Elementen verwendet wird
Die Anweisung der ng-class wird verwendet, um einen oder mehrere CSS-Klassen dynamisch an HTML-Elemente zu binden. Der Wert der ng-class -Anweisung kann eine Zeichenfolge, ein Objekt oder ein Array sein. Wenn es sich um eine Zeichenfolge, werden mehrere Klassennamen durch Leerzeichen getrennt. Wenn es sich um ein Objekt handelt, müssen Sie ein Schlüsselwertpaar verwenden, das ein boolescher Wert ist , und der Wert ist der Klassenname, den Sie hinzufügen möchten. Die Klasse wird nur hinzugefügt, wenn der Schlüssel wahr ist . Wenn es sich um ein Array handelt, kann es aus Saiten oder Kombinationen von Objekten bestehen, und die Elemente des Arrays können Zeichenfolgen oder Objekte sein.
<! DocType html> <html> <kopf> <meta charset = "utf-8"/> <title> AngularJs </title> <script src = "js/angular.min.js"> </script> <script src = "js/Angular-Animate.js"> </script> <style> <style> <style>. Hintergrundfarbe: hellblau; Polsterung: 20px; Schriftfamilie: "Courier New";}. Tomate {Hintergrundfarbe: Coral; Polsterung: 40px; Schriftfamilie: Verdana;} </style> </head> <body ng-App = ""> <span> Wählen Sie eine Klasse aus: </span> <select ng-model = "home"> <Option Value = "Sky"> Sky Color </option> <Option Value = "Tomato"> Tomato Color </option </select> </select acto-Homer. es! </h4> </div> </body> </html>(2) NG-Klasse-Even ist ähnlich wie die NG-Klasse, funktioniert jedoch nur auf Linien. Die NG-Klasse-ODD ähnelt der NG-Klasse, funktioniert jedoch nur auf ungeraden Zeilen. Die NG-Klasse-ODD ähnelt der NG-Klasse, funktioniert jedoch nur auf ungeraden Zeilen.
<! DocType html> <html> <kopf> <meta charset = "utf-8"/> <title> AngularJs </title> <script src = "js/angular.min.js"> </script> <style> .stripedeven {farbe: weiß; Hintergrundfarbe: Cyan;}. Stripedodd {Farbe: weiß; background-color:yellowgreen;}</style></head><body ng-app="myApp"><table ng-controller="myCtrl"><tr> <th>Name</th> <th>Country</th></tr><tr ng-repeat="x in records" ng-class-even="'stripedeven'" ng-class-odd="'stripedodd'"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> <script> var app = angular.module ("myapp", []); Futterkiste", "Country" : "Germany" }, { "Name" : "Berglunds snabbk", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezuma", "Country" : "Mexico" }, { "Name" : "Ernst Handel", "Country" : "Austria" } ]}); </script> </body> </html>(3) ng-wenn der Zustand falsch ist. Entfernen Sie HTML-Elemente
ng-if -Anweisung wird verwendet, um HTML-Elemente zu entfernen, wenn der Ausdruck falsch ist. Wenn das Ergebnis der Ausführung der IF -Anweisung wahr ist, wird das entfernte Element hinzugefügt und angezeigt. ng-if -Richtlinie unterscheidet sich von ng-hide , ng-hide Elemente verbirgt, während ng-if Elemente aus dem DOM entfernt.
<! DocType html> <html> <kopf> <meta charset = "utf-8"/> <title> AngularJs </title> <script src = "js/angular.min ng-model = "myvar"> </h3> <div ng-if = "myvar"> <h1> Willkommen </h1> <p> Willkommen in meinem Haus. </p> <p> Wenn das Kontrollkästchen erneut ausgewählt ist, wird das DIV-Element neu gespielt. </p> </body> </html>
(4) NG-CHECKED gibt an, ob das Element ausgewählt ist
Mit der ng-checked Direktive werden die geprüften Eigenschaften eines Kontrollkästchen oder Optionsschalters festgelegt. Wenn ng-checked Eigenschaft true zurückgibt, wird das Kontrollkästchen oder das Optionsfeld ausgewählt.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script></head><body ng-app=""> <h3>My cars:</h3> <input type="checkbox" ng-model="all"> Check all<br> <Eingabe type = "checkbox" ng-checked = "all"> volvo <br> <Eingabe type = "Checkbox" ng-checked = "all"> ford <br> <Eingabe type = "Checkbox" ng-checked = "all"> ford <br> <Eingabe type = "Checkbox" ng-Checked = "All"> nge-select. </h3> </body> </html>
3. Verwenden Sie die CSS -Animation
Wir können CSS -Übergang oder CSS -Animation verwenden, um HTML -Elemente animiert zu machen.
(1) CSS -Übergang
Mit CSS-Übergang können wir einen CSS-Attributwert reibungslos zu einem anderen ändern: Wenn .ng-hide -Klasse auf das DIV-Element eingestellt ist, dauert der Übergang 0,5 Sekunden und die Höhe ändert sich von 100px auf 0.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script><script src="js/angular-animate.min.js"></script><style>div { transition: all linear 0.5s; Hintergrundfarbe: hellblau; Höhe: 100px;}. ng-hide {Höhe: 0;} </style> </head> <body ng-App = "MyApp"> <H1> div: <Eingabe type = "Checkbox" ng-model = "myCheck"> </h1> <divular.m.module "myCheck"> </div> </divular> igga apply.module (myCheck "> </div> </div> <Script> appl. ['nganimate']); </script> </body> </html>(2) CSS -Animation
Mit CSS-Animation können Sie die CSS-Attributwerte reibungslos ändern: Wenn .ng-hide -Klasse im DIV-Element eingestellt ist, wird myChange Animation ausgeführt und ändert die Höhe von 100px reibungslos auf 0.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script><script src="js/angular-animate.min.js"></script><style>@keyframes myChange { from { height: 100px; } bis {Höhe: 10; }} div {Höhe: 100px; Hintergrundfarbe: hellblau;} div.ng-hide {Animation: 10s mychange;} </style> </head> <body ng-App = "nganimate"> hide div: <input type = "Checkbox" ng-model = "myCheck"> <divng-hide = "myCheck"> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body>Zusammenfassen
Im obigen dreht sich alles um AngularJS -Animation. Dieser Artikel fasst ihn ausführlich zusammen und bietet Beispielcode. Ich hoffe, es wird für alle hilfreich sein, die einige AngularJs lernen.