AngularJS bietet animierte Übergänge mit Hilfe von CSS.
Was ist eine Animation?
Eine Animation ist, wenn die Transformation eines HTML-Elements Sie eine Illusion von Bewegung gibt.
Beispiel:
Markieren Sie die Checkbox der DIV zu verstecken:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Versuch es selber "  | Anwendungen sollten nicht mit Animationen gefüllt werden, aber einige Animationen kann die Anwendung leichter verständlich zu machen. |
|---|
Was brauche ich?
Um Ihre Anwendungen bereit für Animationen machen, müssen Sie die AngularJS Animate Bibliothek enthalten:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Dann müssen Sie auf das verweisen ngAnimate Modul in Ihrer Anwendung:
<body ng-app="ngAnimate"> Oder wenn Ihre Anwendung einen Namen hat, fügen Sie ngAnimate als Abhängigkeit in dem Anwendungsmodul:
Beispiel
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app =
angular.module('myApp', ['ngAnimate']);
</script> Versuch es selber " Was bedeutet ngAnimate tun?
Das ngAnimate Modul hinzufügt und entfernt Klassen.
Das ngAnimate Modul nicht animieren nicht Ihre HTML-Elemente, aber wenn ngAnimate bestimmte Ereignisse bemerken, wie verbergen oder zeigen eines HTML-Elements, wird das Element einige vordefinierte Klassen, die verwendet werden können, um Animationen zu machen.
Die Richtlinien in AngularJS die Hinzufügen / Entfernen von Klassen sind:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
Die ng-show und ng-hide Richtlinien hinzufügt oder entfernt eine ng-hide Klassenwert.
Die anderen Richtlinien fügt eine ng-enter Klasse Wert , wenn sie die DOM und eine Eingabe ng-leave Attribut , wenn sie aus dem DOM entfernt werden.
Die ng-repeat - Richtlinie fügt auch eine ng-move Klasse Wert , wenn die HTML - Element Position ändert.
Darüber hinaus während der Animation wird das HTML - Element einen Satz von Klassenwerte haben, die entfernt werden , wenn die Animation beendet ist. Beispiel: die ng-hide Richtlinie wird diese Klasse Werte hinzu:
-
ng-animate -
ng-hide-animate -
ng-hide-add(wenn das Element wird ausgeblendet) -
ng-hide-remove(wenn das Element wird gezeigt) -
ng-hide-add-active(wenn das Element wird ausgeblendet) -
ng-hide-remove-active(wenn das Element wird gezeigt)
Animationen Mit CSS
Wir können CSS-Übergänge oder CSS-Animationen verwenden, um HTML-Elemente zu animieren. Dieses Tutorial zeigt Ihnen beides.
Um mehr über CSS - Animation lernen, studieren unsere CSS Transition Tutorial und unsere CSS - Animation Tutorial .
CSS Transitions
CSS-Übergänge können Sie problemlos Werte CSS-Eigenschaft zu ändern, von einem Wert zum anderen, über einen bestimmten Dauer:
Beispiel:
Wenn das DIV - Element das bekommt .ng-hide Klasse, dauert der Übergang 0,5 Sekunden, und die Höhe wird sanft von 100px auf 0 zu ändern:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Versuch es selber " CSS Animationen
CSS-Animationen können Sie problemlos Werte CSS-Eigenschaft zu ändern, von einem Wert zum anderen, über einen bestimmten Dauer:
Beispiel:
Wenn das DIV - Element das bekommt .ng-hide - Klasse, die myChange wird Animation laufen, was von 100px auf 0 reibungslos die Höhe zu ändern:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
Versuch es selber "