Animações AngularJS

Com a ajuda do CSS, o AngularJS oferece transições de animação.

O que é animação?

A animação é a transformação de elementos HTML que nos dá a ilusão de movimento.

instância

Marque a caixa de seleção para ocultar o DIV:

<body ng-app="ngAnimate">
Ocultar DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

Experimente por Si Mesmo

O aplicativo não deve estar cheio de animações, mas algumas animações podem tornar o aplicativo mais fácil de entender.

O que eu preciso?

Para preparar o seu aplicativo para animações, você deve incluir a biblioteca AngularJS Animate:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

Então, você deve referenciar o módulo dentro do seu aplicativo. ngAnimate Módulo:

<body ng-app="ngAnimate">

Ou, se seu aplicativo tiver um nome, defina ngAnimate Adicione como dependência do módulo do aplicativo:

instância

<body ng-app="myApp">
<h1>Esconder DIV：<input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

Experimente por Si Mesmo

O que é o ngAnimate?

ngAnimate o módulo adiciona e remove classes.

ngAnimate O módulo não anima seus elementos HTML, mas quando ngAnimate Notar que alguns eventos (como a ocultação ou exibição de elementos HTML) adicionam classes pré-definidas ao elemento, que podem ser usadas para criar animações.

As diretivas de adição/remoção de classes no AngularJS incluem:

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

ng-show e ng-hide diretivas adicionam ou removem ng-hide Valores de classe.

outras diretivas adicionam ng-enter valores de classe e adicionará ng-leave propriedade.

Quando o elemento HTML mudar de posiçãong-repeat A diretiva também adicionará ng-move Valores de classe.

Além disso, durante o processo de animação, o elemento HTML terá um conjunto de valores de classe, que serão removidos após a conclusão da animação. Por exemplo:ng-hide A diretiva adicionará esses valores de classe:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Se você deseja ocultar o elemento)
  • ng-hide-remove(Se você deseja exibir o elemento)
  • ng-hide-add-active(Se você deseja ocultar o elemento)
  • ng-hide-remove-active(Se você deseja exibir o elemento)

Animação com CSS

Podemos usar transições CSS ou animações CSS para adicionar efeitos animados a elementos HTML. Este tutorial mostrará ambos.

Para obter mais informações sobre animações CSS, aprenda nossos tutoriais de transições CSS e animações CSS.

Transição CSS

A transição CSS permite que você altere suavemente o valor de um atributo CSS durante um período de tempo especificado:

instância

quando o elemento DIV obtem .ng-hide No momento da transição, ela durará 0.5 segundos, a altura passará suavemente de 100px para 0:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
div.ng-hide {
  height: 0;
}
</style>

Experimente por Si Mesmo

Animações CSS

As animações CSS permitem que você faça uma transição suave de um valor de atributo CSS para outro dentro de um período de tempo especificado:

instância

quando o elemento DIV obtem .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Experimente por Si Mesmo