AngularJS-Animationen

AngularJS bietet Animationseffekte, die mit CSS verwendet werden können.

Um Animationen zu verwenden, benötigt AngularJS die Bibliothek angular-animate.min.js.

<script src="../libs/angular.js/1.4.6/angular-animate.min.js.html"></script>

Außerdem müssen Sie das Modul ngAnimate in Ihrer Anwendung verwenden:

<body ng-app="ngAnimate">

Was ist eine Animation?

Animationen sind dynamisch wechselnde Effekte, die durch Veränderung von HTML-Elementen erzeugt werden.

Beispiel

Aktivieren Sie das Kontrollkästchen, um das DIV auszublenden:

<body ng-app="ngAnimate">

Das DIV ausblenden:<input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck"></div>

</body>

Selbst ausprobieren »
Note Animationen sollten in Anwendungen nicht zu häufig verwendet werden, aber ein angemessener Einsatz von Animationen kann die Seite bereichern und es Benutzern erleichtern, sie zu verstehen.

Wenn unsere Anwendung den Anwendungsnamen bereits festgelegt hat, können wir ngAnimate direkt zum Modul hinzufügen:

Beispiel

<body ng-app="myApp">

<h1>Das DIV ausblenden:<input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

Selbst ausprobieren »

Was macht ngAnimate?

Das Modul ngAnimate kann Klassen hinzufügen oder entfernen.

Das Modul ngAnimate lässt HTML-Elemente nicht selbst animieren, aber ngAnimate überwacht Ereignisse wie das Ausblenden und Anzeigen von HTML-Elementen. Wenn ein Ereignis eintritt, verwendet ngAnimate vordefinierte Klassen, um Animationen für die HTML-Elemente festzulegen.

AngularJS-Direktiven, die Klassen hinzufügen/entfernen:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-showundng-hideDie Direktive wird verwendet, um Folgendes hinzuzufügen oder zu entfernenng-hideKlassenwerte.

Andere Direktiven fügenng-enterKlassen hinzu, wenn sie in das DOM eintreten, und wenn sie aus dem DOM entfernt werden, fügen sieng-leaveAttribute hinzu.

Wenn sich die Position eines HTML-Elements ändert,ng-repeatDie Direktive kann außerdemng-moveKlassen hinzufügen.

Darüber hinaus wird nach Abschluss der Animation die Klassensammlung des HTML-Elements entfernt. Zum Beispiel:ng-hideDie Direktive wird die folgenden Klassen hinzufügen:

  • ng-animate
  • ng-hide-animate
  • ng-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)

Verwendung von CSS-Animationen

Wir können CSS-Transitions oder CSS-Animationen verwenden, um HTML-Elemente zu animieren. Für diesen Teil kannst du in unseremCSS-Transition-Tutorial， CSS-Animations-Tutorial nachsehen。

CSS-Transitions

CSS-Transitions ermöglichen es uns, einen CSS-Eigenschaftswert reibungslos in einen anderen zu ändern:

Beispiel

Wenn das DIV-Element mit der.ng-hideKlasse gesetzt wird, dauert der Übergang 0.5 Sekunden und ändert die Höhe von 100px auf 0:

<style>
div {
    transition: all linear 0.5s;
    background-color: lightblue;
    height: 100px;
}
.ng-hide {
    height: 0;
}
</style>

Selbst ausprobieren »

CSS-Animationen

CSS-Animationen ermöglichen es dir, CSS-Eigenschaftswerte reibungslos zu ändern:

Beispiel

Wenn das DIV-Element mit der.ng-hideclass,myChangeDie Animation wird ausgeführt und ändert die Höhe reibungslos von 100px auf 0:

<style>
@keyframes myChange {
    from {
        height: 100px;
    } to {
        height: 0;
    }
}
div {
    height: 100px;
    background-color: lightblue;
}
div.ng-hide {
    animation: 0.5s myChange;
}
</style>

Selbst ausprobieren »
Andere Erweiterungen