Latest web development tutorials

AngularJS Animation,

AngularJS bietet Animation, können Sie mit CSS verwenden.

AngularJS Animation benötigen Winkel animate.min.js Bibliothek einzuführen. 

<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

Es sollte bei der Anwendung Modell ngAnimate verwendet werden: 

<body ng-app="ngAnimate">

Was ist Animation?

Die Animation ist dynamische Effekte durch Änderung des HTML-Elements erzeugt.

Beispiele

Wählen Sie das Kontrollkästchen DIV zu verstecken:

<Body ng-app = "ngAnimate ">

Verstecken DIV: <input type = "checkbox " ng-Modell = "MyCheck">

<Div ng-hide = "MyCheck "> </ div>

</ Body>

Versuchen »
Note Animationsanwendungen nicht zu viel, aber angemessene Verwendung der Animation kann den Reichtum der Seite zu erhöhen, oder Sie können Benutzern ermöglichen, leichter zu verstehen.

Wenn wir den Namen der Anwendung gelten eingerichtet wurde, können Sie ngAnimate setzen direkt im Modell hinzugefügt:

Beispiele

<Body ng-app = "myApp ">

<H1> ausblenden DIV: <input type = "checkbox " ng-Modell = "MyCheck"> </ h1>

<Div ng-hide = "MyCheck "> </ div>

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

Versuchen »

ngAnimate getan?

ngAnimate Modell kann Klasse hinzufügen oder entfernen.

ngAnimate Modell nicht belebter HTML-Elemente, aber ngAnimate wird die Veranstaltung, ähnlich wie die versteckten Anzeige von HTML-Elementen zu überwachen, wenn ein Ereignis ngAnimate auftritt, wird die vordefinierte Klasse verwenden, um HTML-Elemente zu animieren.

AngularJS hinzufügen / entfernen Klassenunterricht:

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

ng-show und ng-hide Befehl zum Hinzufügen oder Entfernen von ng-hide den Wert der Klasse.

Andere Anweisungen werden in das DOM hinzugefügt werden ng-enter Klasse, entfernen DOM fügt ng-leave Eigenschaft.

Wenn die HTML - Element Position ändert, ng-repeat - Befehl kann auch hinzufügen ng-move - Typ.

Darüber hinaus wird nach Abschluss der Klasse Sammlung von HTML-Elemente werden entfernt. Zum Beispiel: ng-hide Befehl über Klasse hinzufügen:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (wenn das Element wird ausgeblendet)
  • ng-hide-remove (wenn das Element angezeigt wird )
  • ng-hide-add-active (wenn das Element verdeckt)
  • ng-hide-remove-active (wenn das Element angezeigt wird )

Mit CSS-Animation

Wir können CSS - Übergang (Transition) oder CSS - Animation , die HTML - Elemente zu animieren, die Teil verwenden , können Sie unser siehe CSS Übergang Tutorial , CSS - Animation Tutorial .

CSS Transitions

CSS ermöglicht es uns, einen reibungslosen Übergang auf einen Wert CSS-Eigenschaft auf ein anderes geändert:

Beispiele

In den DIV - Element - Sets .ng-hide Klasse erfolgt der Übergang 0,5 Sekunden, um die Höhe von 100px auf 0:

<Style>
div {
Übergang: alle linearen 0,5s;
background-color: hellblau;
Höhe: 100px;
}
.ng-hide {
Höhe: 0;
}
</ Style>

Versuchen »

CSS-Animation

CSS-Animation können Sie CSS-Eigenschaft Werte ändern zu glätten:

Beispiele

In der DIV - Element setzt .ng-hide -Zeit Klasse, myChange Animation ausgeführt wird, wird es von 100px auf 0 glatt Höhe sein:

<Style>
@keyframes myChange {
von {
Höhe: 100px;
Um} {
Höhe: 0;
}
}
div {
Höhe: 100px;
background-color: hellblau;
}
div.ng-hide {
Animation: 0,5s myChange;
}
</ Style>

Versuchen »