AngularJS Animaciones

AngularJS proporciona efectos de animación que se pueden usar junto con CSS.

Para usar animaciones, AngularJS requiere incluir la librería angular-animate.min.js.

<script src="../libs/angular.js/1.4.6/angular-animate.min.js.html"></script>

También es necesario usar el módulo ngAnimate en la aplicación:

<body ng-app="ngAnimate">

¿Qué es una animación?

La animación es un efecto de cambio dinámico producido al modificar elementos HTML.

Ejemplo

Marque la casilla para ocultar el DIV:

<body ng-app="ngAnimate">

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

<div ng-hide="myCheck"></div>

</body>

Pruébalo »
Note No debe haber demasiadas animaciones en la aplicación, pero un uso adecuado de las animaciones puede aumentar la riqueza de la página y facilitar la comprensión a los usuarios.

Si nuestra aplicación ya tiene un nombre de aplicación, podemos agregar ngAnimate directamente en el módulo:

Ejemplo

<body ng-app="myApp">

<h1>Ocultar DIV:<input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

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

Pruébalo »

¿Qué hace ngAnimate?

El módulo ngAnimate puede agregar o eliminar clases.

El módulo ngAnimate no puede hacer que los elementos HTML se animen por sí mismo, pero ngAnimate monitorea eventos, como ocultar o mostrar elementos HTML. Si el evento ocurre, ngAnimate usa clases predefinidas para establecer la animación de los elementos HTML.

Directivas de AngularJS para agregar/eliminar clases:

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

ng-showyng-hideLa directiva se usa para agregar o eliminarng-hideel valor de la clase.

Otras directivas agregaránng-enterla clase al entrar en el DOM; al eliminar del DOM, agregaránng-leaveel atributo.

Cuando la posición de un elemento HTML cambia,ng-repeatla directiva también puede agregarng-movela clase.

Además, cuando se complete la animación, el conjunto de clases del elemento HTML se eliminará. Por ejemplo:ng-hideLa directiva agregará las siguientes clases:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(si el elemento va a ser ocultado)
  • ng-hide-remove(si el elemento va a ser mostrado)
  • ng-hide-add-active(si el elemento será ocultado)
  • ng-hide-remove-active(si el elemento será mostrado)

Usando animaciones CSS

Podemos usar transiciones CSS o animaciones CSS para lograr efectos de animación en los elementos HTML. Para esta parte, puedes consultar nuestrosTutorial de transiciones CSS， Tutorial de animaciones CSS。

Transiciones CSS

Las transiciones CSS nos permiten modificar suavemente un valor de propiedad CSS a otro:

Ejemplo

En el elemento DIV se ha establecido.ng-hidela clase, la transición tarda 0.5 segundos y la altura cambia de 100px a 0:

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

Pruébalo »

Animaciones CSS

Las animaciones CSS te permiten modificar suavemente los valores de las propiedades CSS:

Ejemplo

En el elemento DIV se ha establecido.ng-hidela clase, lamyChangeanimación se ejecutará y cambiará suavemente la altura de 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>

Pruébalo »
Otras extensiones