Animaciones de AngularJS

Con la ayuda de CSS, AngularJS ofrece transiciones de animación.

¿Qué es la animación?

La animación es la transformación de elementos HTML que le da una ilusión de movimiento.

instancia

Marque la casilla de verificación para ocultar el DIV:

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

Prueba por tu cuenta

La aplicación no debe estar llena de animaciones, pero algunas animaciones pueden hacer que la aplicación sea más fácil de entender.

¿Qué necesito?

Para preparar su aplicación para la animación, debe incluir la biblioteca AngularJS Animate:

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

Luego, debes referenciarlo en tu aplicación. ngAnimate Módulo:

<body ng-app="ngAnimate">

O, si tu aplicación tiene un nombre, por favor agrega ngAnimate Agregar como dependencia del módulo de la aplicación:

instancia

<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>

Prueba por tu cuenta

¿Para qué sirve ngAnimate?

ngAnimate el módulo agrega y elimina clases.

ngAnimate El módulo no hace que tus elementos HTML se animen, pero cuando ngAnimate Notar que ciertos eventos (como ocultar o mostrar elementos HTML) hacen que el elemento obtenga algunas clases predefinidas, que se pueden usar para hacer animaciones.

Las directivas de agregar y eliminar clases en AngularJS incluyen:

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

ng-show y ng-hide directivas de agregar o eliminar ng-hide Valores de clase.

otras directivas se agregarán al ingresar al DOM ng-enter valores de clase y se agregarán ng-leave propiedades.

Cuando un elemento HTML cambie de posición,ng-repeat Las directivas también agregarán ng-move Valores de clase.

Además, durante el proceso de animación, los elementos HTML tendrán un conjunto de valores de clase, que se eliminarán una vez completada la animación. Por ejemplo:ng-hide Las directivas agregarán estos valores de clase:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Si se debe ocultar el elemento)
  • ng-hide-remove(Si se debe mostrar el elemento)
  • ng-hide-add-active(Si se debe ocultar el elemento)
  • ng-hide-remove-active(Si se debe mostrar el elemento)

Animación con CSS

Podemos usar transiciones CSS o animaciones CSS para agregar efectos de animación a elementos HTML. Este tutorial te mostrará ambos.

Para obtener más información sobre CSS animaciones, aprende nuestros tutoriales de transiciones CSS y animaciones CSS.

Transición CSS

La transición CSS permite que en el tiempo de duración especificado, un valor de atributo CSS se cambie suavemente a otro valor:

instancia

cuando el elemento DIV obtiene .ng-hide Al cambiar de clase, la transición durará 0.5 segundos, la altura se transitará suavemente de 100px a 0:

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

Prueba por tu cuenta

Animaciones CSS

Las animaciones CSS permiten que un valor de atributo CSS se cambie suavemente a otro valor en un período de tiempo dado:

instancia

cuando el elemento DIV obtiene .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>

Prueba por tu cuenta