AngularJS-Animation

Mit Hilfe von CSS bietet AngularJS Animationstransitionen.

Was ist eine Animation?

Animationen sind die Transformationen von HTML-Elementen, die Ihnen einen Bewegungseindruck vermitteln.

Beispiel

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

<body ng-app="ngAnimate">
DIV ausblenden:<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

Versuchen Sie es selbst

Eine Anwendung sollte nicht überflutet sein mit Animationen, aber einige Animationen können die Anwendung leichter verständlich machen.

Was brauche ich?

Um sicherzustellen, dass Ihre Anwendung für Animationen bereit ist, müssen Sie die AngularJS Animate-Bibliothek enthalten:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

Dann müssen Sie das Modul in Ihrer Anwendung referenzieren. ngAnimate Modul:

<body ng-app="ngAnimate">

Oder, wenn Ihr Anwendungsnamen hat, fügen Sie ngAnimate Fügen Sie als Abhängigkeit für das Anwendungsmodul hinzu:

Beispiel

<body ng-app="myApp">
<h1>Versteckten DIV anzeigen：<input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

Versuchen Sie es selbst

Was ist die Funktion von ngAnimate?

ngAnimate Das Modul Klassen hinzufügt und entfernt.

ngAnimate Das Modul animiert Ihre HTML-Elemente nicht, aber wenn ngAnimate Beobachtet man bestimmte Ereignisse (wie das Verbergen oder Anzeigen von HTML-Elementen), erhält das Element einige vorgegebene Klassen, die für Animationen verwendet werden können.

Anweisungen zum Hinzufügen und Entfernen von Klassen in AngularJS umfassen:

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

ng-show und ng-hide Anweisungen hinzufügen oder löschen ng-hide Klassenwerte.

Andere Anweisungen fügen beim Eintreten in den DOM hinzu ng-enter Klassenwerte hinzufügt und hinzufügt, wenn es aus dem DOM gelöscht wird ng-leave Eigenschaften.

Wenn sich ein HTML-Element in seiner Position ändertng-repeat Die Anweisung fügt auch hinzu ng-move Klassenwerte.

Darüber hinaus haben HTML-Elemente während des Animationsprozesses eine Reihe von Klassenwerten, die nach Abschluss der Animation entfernt werden. Zum Beispiel:ng-hide Die Anweisung fügt diese Klassenwerte hinzu:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Wenn das Element versteckt werden soll)
  • ng-hide-remove(Wenn das Element angezeigt werden soll)
  • ng-hide-add-active(Wenn das Element versteckt werden soll)
  • ng-hide-remove-active(Wenn das Element angezeigt werden soll)

Animationen mit CSS durchführen

Wir können CSS-Übergänge oder CSS-Animationen verwenden, um HTML-Elementen Animationseffekte hinzuzufügen. Dieses Tutorial zeigt Ihnen beide.

Für mehr Informationen über CSS-Animationen lernen Sie bitte unsere Tutorials zu CSS-Übergängen und CSS-Animationen.

CSS-Übergänge

CSS-Übergänge erlauben es Ihnen, den Wert einer CSS-Eigenschaft während einer bestimmten Dauer sanft von einem Wert zum anderen zu ändern:

Beispiel

wenn das DIV-Element .ng-hide Wenn der Übergang startet, dauert er 0.5 Sekunden, und die Höhe wird von 100px sanft auf 0px übergehen:

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

Versuchen Sie es selbst

CSS-Animation

CSS-Animation ermöglicht es Ihnen, den Wert eines CSS-Attributs während einer bestimmten Zeitspanne sanft von einem Wert zum anderen zu ändern:

Beispiel

wenn das DIV-Element .ng-hide <style>

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

Versuchen Sie es selbst