AngularJS fornece transições animadas, com a ajuda de CSS.
O que é uma animação?
Uma animação é quando a transformação de um elemento HTML lhe dá uma ilusão de movimento.
Exemplo:
Marque a caixa para ocultar a DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Tente você mesmo "  | Aplicativos não devem ser preenchidos com animações, mas algumas animações podem tornar a aplicação mais fácil de entender. |
|---|
O que eu preciso?
Para tornar seus aplicativos prontos para animações, você deve incluir a biblioteca AngularJS Animate:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
Então você deve se referir ao ngAnimate módulo em seu aplicativo:
<body ng-app="ngAnimate"> Ou se a sua aplicação tem um nome, adicione ngAnimate como uma dependência em seu módulo de aplicação:
Exemplo
<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> Tente você mesmo " O que faz ngAnimate Do?
O módulo ngAnimate adiciona e remove classes.
O módulo ngAnimate não animar seus elementos HTML, mas quando ngAnimate notar certos eventos, como ocultar ou mostrar de um elemento HTML, o elemento recebe algumas classes pré-definidas que podem ser usadas para fazer animações.
As directivas em AngularJS que adicionar / remover classes são:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
O ng-show e ng-hide directivas adiciona ou remove um ng-hide valor de classe.
As outras directivas adiciona um ng-enter valor de classe quando entram no DOM, e uma ng-leave atributo quando eles são removidos do DOM.
O ng-repeat directiva também adiciona um ng-move valor de classe quando o elemento HTML muda de posição.
Além disso, durante a animação, o elemento HTML irá ter um conjunto de valores de classe, que irá ser removida quando a animação tenha terminado. Exemplo: o ng-hide directiva irá adicionar estes valores de classe:
-
ng-animate -
ng-hide-animate -
ng-hide-add(se o elemento será oculto) -
ng-hide-remove(se o elemento será exibido) -
ng-hide-add-active(se o elemento será oculto) -
ng-hide-remove-active(se o elemento será exibido)
Animações usando CSS
Podemos usar transições CSS ou animações CSS para animar elementos HTML. Este tutorial irá mostrar-lhe ambos.
Para saber mais sobre Animação CSS, estudar o nosso CSS Transição Tutorial e nossa CSS Animação Tutorial .
CSS Transitions
transições CSS permite alterar os valores de propriedade CSS sem problemas, a partir de um valor para outro, durante um determinado período:
Exemplo:
Quando o elemento DIV recebe o .ng-hide classe, a transição levará 0,5 segundos, ea altura vai suavemente mudar de 100px para 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Tente você mesmo " CSS Animations
CSS Animations permite alterar os valores de propriedade CSS sem problemas, a partir de um valor para outro, durante um determinado período:
Exemplo:
Quando o elemento DIV recebe o .ng-hide classe, o myChange animação será executado, que vai suavemente alterar a altura de 100px para 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
Tente você mesmo "