AngularJS proporciona transiciones animadas, con la ayuda de CSS.
¿Qué es una animación?
Una animación es cuando la transformación de un elemento HTML que da una ilusión de movimiento.
Ejemplo:
Marque la casilla para ocultar el DIV:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Inténtalo tú mismo "  | Las aplicaciones no deben llenarse con animaciones, pero algunas animaciones pueden hacer la aplicación más fácil de entender. |
|---|
¿Qué necesito?
Para hacer que sus aplicaciones listo para animaciones, debe incluir la biblioteca AngularJS Animación:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
A continuación, debe referirse a la ngAnimate módulo en su aplicación:
<body ng-app="ngAnimate"> O si su aplicación tiene un nombre, añada ngAnimate como una dependencia en su módulo de 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> Inténtalo tú mismo " Lo que hace ngAnimate Do?
El módulo ngAnimate añade y elimina clases.
El módulo ngAnimate no animar a sus elementos HTML, pero cuando se dio cuenta ngAnimate ciertos eventos, como ocultar o mostrar de un elemento HTML, el elemento obtiene algunas clases predefinidas que se pueden utilizar para hacer animaciones.
Las directivas en AngularJS que añadir / quitar clases son:
-
ng-show -
ng-hide -
ng-class -
ng-view -
ng-include -
ng-repeat -
ng-if -
ng-switch
El ng-show y ng-hide directivas permite añadir o eliminar un ng-hide valor de clase.
Las otras directivas agrega un ng-enter valor de clase cuando entran en el DOM, y un ng-leave atributo cuando se retiran del DOM.
El ng-repeat directiva también añade un ng-move valor de la clase cuando el elemento HTML cambia de posición.
Además, durante la animación, el elemento HTML tendrá un conjunto de valores de la clase, que se retirarán cuando la animación ha terminado. Ejemplo: el ng-hide Directiva añadirá estos valores de la clase:
-
ng-animate -
ng-hide-animate -
ng-hide-add(si se oculta el elemento) -
ng-hide-remove(si se mostrará el elemento) -
ng-hide-add-active(si se oculta el elemento) -
ng-hide-remove-active(si se mostrará el elemento)
Animaciones usando CSS
Podemos utilizar 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, estudiar nuestra CSS Tutorial de transición y nuestro CSS Animación Tutorial .
Las transiciones CSS
transiciones CSS le permite cambiar valores de las propiedades CSS sin problemas, a partir de un valor a otro, durante un periodo determinado:
Ejemplo:
Cuando el elemento DIV obtiene el .ng-hide la clase, la transición se llevará a 0,5 segundos, y la altura va a cambiar suavemente de 100px a 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
Inténtalo tú mismo " Las animaciones CSS
Las animaciones CSS le permite cambiar valores de las propiedades CSS sin problemas, a partir de un valor a otro, durante un periodo determinado:
Ejemplo:
Cuando el elemento DIV obtiene el .ng-hide clase, el myChange animación se ejecutará, lo que sin problemas cambiar 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>
Inténtalo tú mismo "