Latest web development tutorials

AngularJS Animazione

AngularJS offre animazione, è possibile utilizzare con i CSS.

AngularJS animazione necessità di introdurre libreria angolare animate.min.js. 

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

Dovrebbe essere usato nel modello di applicazione ngAnimate: 

<body ng-app="ngAnimate">

Che cosa è l'animazione?

L'animazione è effetti dinamici alterando l'elemento HTML prodotto.

Esempi

Selezionare la casella di controllo per nascondere DIV:

<Corpo ng-app = "ngAnimate ">

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

<Div ng-nascondere = "myCheck "> </ div>

</ Corpo>

Prova »
nota applicazioni di animazione non troppo, ma l'uso appropriato di animazione può aumentare la ricchezza della pagina, oppure è possibile consentire agli utenti di comprendere più facilmente.

Se applichiamo il nome dell'applicazione è stato istituito, si può mettere ngAnimate aggiunto direttamente nel modello:

Esempi

<Corpo ng-app = "myApp ">

<H1> Nascondi DIV: <type = "input checkbox ng-modello" = "myCheck"> </ h1>

<Div ng-nascondere = "myCheck "> </ div>

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

Prova »

ngAnimate fatto?

modello ngAnimate può aggiungere o rimuovere classe.

modello ngAnimate non ha elementi di animare HTML, ma ngAnimate seguirà l'evento, simile agli elementi di visualizzazione HTML nascosti, se si verifica un evento ngAnimate utilizzerà la classe predefinita per animare elementi HTML.

AngularJS aggiungere / rimuovere l'istruzione di classe:

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

ng-show e ng-hide comando per l'aggiunta o la rimozione ng-hide il valore della classe.

Altre istruzioni saranno aggiunti nel DOM ng-enter classe, rimuovere DOM aggiungerà ng-leave proprietà.

Quando i cambiamenti di posizione HTML elemento, ng-repeat comando possono anche aggiungere ng-move tipo.

Inoltre, dopo il completamento, classe raccolta di elementi HTML saranno rimossi. Per esempio: ng-hide comando aggiungerà circa classe:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (se l'elemento verrà nascosto)
  • ng-hide-remove (se è visualizzato l'elemento)
  • ng-hide-add-active (se l'elemento è nascosto)
  • ng-hide-remove-active (se è visualizzato l'elemento)

Utilizzando i CSS Animazione

Possiamo usare transizione CSS (di transizione) o l'animazione CSS che animare elementi HTML, la parte che si può vedere il nostro tutorial di transizione CSS , animazioni CSS esercitazione .

CSS Transitions

CSS ci permette una transizione verso un valore di proprietà CSS cambiato ad un altro:

Esempi

Negli insiemi di elementi DIV .ng-hide di classe, la transizione richiede 0,5 secondi, l'altezza da 100px a 0:

<Style>
div {
transizione: tutto lineare 0.5s;
background-color: azzurro;
altezza: 100px;
}
.NG-nascondere {
altezza: 0;
}
</ Style>

Prova »

CSS Animazione

animazioni CSS permette di lisciare modificare i valori delle proprietà CSS:

Esempi

Nella elemento DIV imposta .ng-hide -time classe, myChange l'animazione viene eseguita, sarà l'altezza regolare da 100px a 0:

<Style>
@keyframes myChange {
da {
altezza: 100px;
} A {
altezza: 0;
}
}
div {
altezza: 100px;
background-color: azzurro;
}
div.ng-nascondere {
Animazione: 0.5s myChange;
}
</ Style>

Prova »