Animaciones AngularJS
AngularJS proporciona transiciones animadas, con ayuda de CSS.
¿Qué es una Animación?
Una animación es cuando la transformación de un elemento HTML te da una ilusión de movimiento.
Ejemplo:
Marque la casilla de verificación para ocultar el DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Las aplicaciones no deben estar llenas de animaciones, pero algunas animaciones pueden hacer que la aplicación sea más fácil de entender.
¿Qué necesito?
Para que sus aplicaciones estén listas para las animaciones, debe incluir la biblioteca AngularJS Animate:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Luego debe consultar el ngAnimatemódulo en su aplicación:
<body ng-app="ngAnimate">
O si su aplicación tiene un nombre, agréguelo ngAnimatecomo dependencia en el módulo de su aplicación:
Ejemplo
<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>
¿Qué hace ngAnimate?
El módulo ngAnimate agrega y elimina clases.
El módulo ngAnimate no anima sus elementos HTML, pero cuando ngAnimate nota ciertos eventos, como ocultar o mostrar un elemento HTML, el elemento obtiene algunas clases predefinidas que se pueden usar para hacer animaciones.
Las directivas en AngularJS que agregan/eliminan clases son:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
Las directivas ng-showy agregan o eliminan un valor de clase.ng-hideng-hide
Las otras directivas agregan un ng-entervalor de clase cuando ingresan al DOM y un ng-leaveatributo cuando se eliminan del DOM.
La ng-repeatdirectiva también agrega un ng-movevalor de clase cuando el elemento HTML cambia de posición.
Además, durante la animación, el elemento HTML tendrá un conjunto de valores de clase, que se eliminarán cuando finalice la animación. Ejemplo: la
ng-hidedirectiva agregará estos valores de clase:
ng-animateng-hide-animateng-hide-add(si el elemento estará oculto)ng-hide-remove(si se mostrará el elemento)ng-hide-add-active(si el elemento estará oculto)ng-hide-remove-active(si se mostrará el elemento)
Animaciones usando CSS
Podemos usar transiciones CSS o animaciones CSS para animar elementos HTML. Este tutorial le mostrará ambos.
Para obtener más información sobre la animación CSS, estudie nuestro Tutorial de transición CSS y nuestro Tutorial de animación CSS .
Transiciones CSS
Las transiciones de CSS le permiten cambiar los valores de las propiedades de CSS sin problemas, de un valor a otro, durante un período determinado:
Ejemplo:
Cuando el elemento DIV obtenga la .ng-hideclase, la transición tomará 0.5 segundos y la altura cambiará suavemente de 100px a 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Animaciones CSS
CSS Animations te permite cambiar los valores de las propiedades CSS sin problemas, de un valor a otro, durante un período determinado:
Ejemplo:
Cuando el elemento DIV obtenga la .ng-hideclase, myChange
se ejecutará la animación, que 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>