Animações AngularJS
AngularJS fornece transições animadas, com ajuda do 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 de seleção para ocultar o DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Os aplicativos não devem ser preenchidos com animações, mas algumas animações podem tornar o aplicativo mais fácil de entender.
O que eu preciso?
Para deixar seus aplicativos prontos para animações, você deve incluir a biblioteca AngularJS Animate:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Então você deve consultar o ngAnimatemódulo em sua aplicação:
<body ng-app="ngAnimate">
Ou se sua aplicação tiver um nome, adicione ngAnimatecomo dependência no módulo da sua 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>
O que o ngAnimate faz?
O módulo ngAnimate adiciona e remove classes.
O módulo ngAnimate não anima seus elementos HTML, mas quando o ngAnimate percebe certos eventos, como ocultar ou mostrar um elemento HTML, o elemento obtém algumas classes pré-definidas que podem ser usadas para fazer animações.
As diretivas em AngularJS que adicionam/removem classes são:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
As diretivas ng-showe adicionam ou removem um valor de classe.ng-hideng-hide
As outras diretivas adicionam um ng-entervalor de classe quando entram no DOM e um ng-leaveatributo quando são removidas do DOM.
A ng-repeatdiretiva também adiciona um ng-movevalor de classe quando o elemento HTML muda de posição.
Além disso, durante a animação, o elemento HTML terá um conjunto de valores de classe, que serão removidos quando a animação terminar. Exemplo: a
ng-hidediretiva adicionará estes valores de classe:
ng-animateng-hide-animateng-hide-add(se o elemento estiver oculto)ng-hide-remove(se o elemento será mostrado)ng-hide-add-active(se o elemento estiver oculto)ng-hide-remove-active(se o elemento será mostrado)
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 CSS Animation, estude nosso CSS Transition Tutorial e nosso CSS Animation Tutorial .
Transições CSS
As transições CSS permitem que você altere os valores das propriedades CSS sem problemas, de um valor para outro, durante um determinado período:
Exemplo:
Quando o elemento DIV obtém a .ng-hideclasse, a transição levará 0,5 segundos e a altura mudará suavemente de 100px para 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Animações CSS
CSS Animations permite que você altere os valores das propriedades CSS sem problemas, de um valor para outro, durante um determinado período:
Exemplo:
Quando o elemento DIV obtiver a .ng-hideclasse, a myChange
animação será executada, o que alterará suavemente 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>