AngularJS-Animationen
AngularJS bietet mit Hilfe von CSS animierte Übergänge.
Was ist eine Animation?
Eine Animation ist, wenn die Transformation eines HTML-Elements Ihnen eine Illusion von Bewegung vermittelt.
Beispiel:
Aktivieren Sie das Kontrollkästchen, um das DIV auszublenden:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Anwendungen sollten nicht mit Animationen gefüllt werden, aber einige Animationen können die Anwendung leichter verständlich machen.
Was brauche ich?
Um Ihre Anwendungen für Animationen vorzubereiten, müssen Sie die AngularJS Animate-Bibliothek einbinden:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Dann müssen Sie sich ngAnimatein Ihrer Bewerbung auf das Modul beziehen:
<body ng-app="ngAnimate">
Oder wenn Ihre Anwendung einen Namen hat, fügen Sie ngAnimateals Abhängigkeit in Ihrem Anwendungsmodul hinzu:
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>
Was macht ngAnimate?
Das ngAnimate-Modul fügt Klassen hinzu und entfernt sie.
Das ngAnimate-Modul animiert Ihre HTML-Elemente nicht, aber wenn ngAnimate bestimmte Ereignisse bemerkt, wie das Ausblenden oder Anzeigen eines HTML-Elements, erhält das Element einige vordefinierte Klassen, die zum Erstellen von Animationen verwendet werden können.
Die Anweisungen in AngularJS, die Klassen hinzufügen/entfernen, lauten:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
Die Direktiven ng-showund fügen einen Klassenwert hinzu oder entfernen ihn.ng-hideng-hide
Die anderen Direktiven fügen einen ng-enterKlassenwert hinzu, wenn sie in das DOM gelangen, und ein ng-leaveAttribut, wenn sie aus dem DOM entfernt werden.
Die ng-repeatDirektive fügt auch einen ng-moveKlassenwert hinzu, wenn das HTML-Element seine Position ändert.
Darüber hinaus verfügt das HTML-Element während der Animation über eine Reihe von Klassenwerten, die nach Abschluss der Animation entfernt werden. Beispiel: Die
ng-hideDirektive fügt diese Klassenwerte hinzu:
ng-animateng-hide-animateng-hide-add(wenn das Element ausgeblendet wird)ng-hide-remove(wenn das Element angezeigt wird)ng-hide-add-active(wenn das Element ausgeblendet wird)ng-hide-remove-active(wenn das Element angezeigt wird)
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 zu erfahren, studieren Sie unser CSS-Übergangs-Tutorial und unser CSS-Animations-Tutorial .
CSS-Übergänge
Mit CSS-Übergängen können Sie CSS-Eigenschaftswerte über einen bestimmten Zeitraum hinweg reibungslos von einem Wert zum anderen ändern:
Beispiel:
Wenn das DIV-Element die .ng-hideKlasse erhält, dauert der Übergang 0,5 Sekunden und die Höhe ändert sich nahtlos von 100 Pixel auf 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
CSS-Animationen
Mit CSS-Animationen können Sie CSS-Eigenschaftswerte über einen bestimmten Zeitraum hinweg reibungslos von einem Wert zum anderen ändern:
Beispiel:
Wenn das DIV-Element die .ng-hideKlasse erhält, wird die myChange
Animation ausgeführt, die die Höhe reibungslos von 100 Pixel auf 0 ändert:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>