AngularJS offre transizioni animate, con l'aiuto di CSS.
Che cosa è una animazione?
Un'animazione è quando la trasformazione di un elemento HTML ti dà l'illusione di movimento.
esempio:
Selezionare la casella per nascondere la DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Prova tu stesso "  | Le applicazioni non devono essere riempiti con le animazioni, ma alcune animazioni possono rendere l'applicazione più facile da capire. |
|---|
Di cosa ho bisogno?
Per rendere le applicazioni pronte per le animazioni, è necessario includere la libreria AngularJS Animate:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Quindi è necessario fare riferimento alla ngAnimate modulo nell'applicazione:
<body ng-app="ngAnimate"> Oppure, se l'applicazione ha un nome, aggiungere ngAnimate come dipendenza nel vostro modulo applicativo:
Esempio
<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> Prova tu stesso " Che cosa fa ngAnimate Do?
Il modulo ngAnimate aggiunge e rimuove le classi.
Il modulo ngAnimate non animare gli elementi HTML, ma quando ngAnimate notato alcuni eventi, come la pelle o per alzata di un elemento HTML, l'elemento ottiene alcune classi predefinite che possono essere utilizzati per fare animazioni.
Le direttive in AngularJS che aggiungere / rimuovere le classi sono:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
Il ng-show e ng-hide direttive aggiunge o rimuove un ng-hide valore di classe.
Le altre direttive aggiunge un ng-enter valore di classe quando entrano nel DOM, e ng-leave attributo quando vengono rimossi dal DOM.
Il ng-repeat direttiva aggiunge anche un ng-move valore di classe quando l'elemento HTML cambia posizione.
Inoltre, durante l'animazione, l'elemento HTML avrà un insieme di valori di classe, che saranno rimossi quando l'animazione è terminata. Esempio: il ng-hide direttiva sarà aggiungere questi valori di classe:
-
ng-animate -
ng-hide-animate -
ng-hide-add(se l'elemento verrà nascosto) -
ng-hide-remove(se l'elemento verrà mostrato) -
ng-hide-add-active(se l'elemento verrà nascosto) -
ng-hide-remove-active(se l'elemento verrà mostrato)
Animazioni usando i CSS
Possiamo usare le transizioni CSS o animazioni CSS per animare elementi HTML. Questo tutorial vi mostrerà entrambi.
Per ulteriori informazioni su Animazione CSS, studiare la nostra CSS Transition Tutorial e il nostro CSS Animation Tutorial .
CSS Transitions
le transizioni CSS consente di modificare i valori delle proprietà CSS senza problemi, da un valore ad un altro, in un determinato periodo:
esempio:
Quando l'elemento DIV ottiene il .ng-hide di classe, la transizione avrà 0,5 secondi, e l'altezza sarà agevolmente cambiare da 100px a 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Prova tu stesso " CSS Animations
CSS Animations permette di modificare i valori delle proprietà CSS senza problemi, da un valore ad un altro, in un determinato periodo:
esempio:
Quando l'elemento DIV ottiene il .ng-hide di classe, il myChange animazione verrà eseguito, che sarà agevolmente modificare l'altezza da 100px a 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
Prova tu stesso "