Latest web development tutorials

AngularJS Animación

AngularJS ofrece la animación, se puede utilizar con CSS.

AngularJS animación necesidad de introducir biblioteca angular animate.min.js. 

<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

Se debe utilizar en el modelo de aplicación ngAnimate: 

<body ng-app="ngAnimate">

¿Cuál es la animación?

La animación es mediante la alteración de los efectos dinámicos del elemento HTML producido.

Ejemplos

Seleccione la casilla de verificación para ocultar DIV:

<Cuerpo ng-app = "ngAnimate ">

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

<Div ng-ocultar = "myCheck "> </ div>

</ Body>

Trate »
nota aplicaciones de animación no demasiado, pero el uso apropiado de la animación pueden aumentar la riqueza de la página, o puede permitir a los usuarios a entender con mayor facilidad.

Si aplicamos el nombre de la aplicación se ha establecido, se puede poner ngAnimate añade directamente en el modelo:

Ejemplos

<Cuerpo ng-app = "myApp ">

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

<Div ng-ocultar = "myCheck "> </ div>

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

Trate »

ngAnimate hecho?

modelo ngAnimate puede añadir o eliminar clase.

ngAnimate modelo no tiene elementos animados HTML, pero ngAnimate controlará el evento, similares a los elementos de visualización HTML ocultos, si se produce un evento ngAnimate utilizará la clase predefinida para animar elementos HTML.

AngularJS añadir / quitar la instrucción de clases:

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

ng-show y ng-hide comandos para agregar o quitar ng-hide el valor de la clase.

Otras instrucciones se añadirán en el DOM ng-enter clase, eliminar DOM añadirá ng-leave la propiedad.

Cuando los cambios de posición del elemento HTML, ng-repeat comando también puede añadir ng-move tipo.

Además, después de la finalización, se eliminará colección de la clase de los elementos HTML. Por ejemplo: ng-hide comando añadirá acerca de la clase:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (si se oculta el elemento)
  • ng-hide-remove (si se muestra el elemento)
  • ng-hide-add-active (si el elemento está oculto)
  • ng-hide-remove-active (si se muestra el elemento)

El uso de CSS Animación

Podemos utilizar CSS transición (transición) o animación CSS que animan los elementos HTML, la parte que se puede ver nuestro tutorial de transición CSS , animación CSS tutorial .

Las transiciones CSS

CSS nos permite una transición suave a un valor de la propiedad CSS cambiado a otro:

Ejemplos

En los conjuntos de elementos DIV .ng-hide la clase, la transición toma 0.5 segundos, la altura de 100px a 0:

<Style>
div {
transición: todo lineal 0,5s;
background-color: azul claro;
altura: 100px;
}
.NG-ocultar {
altura: 0;
}
</ Style>

Trate »

CSS Animación

animación CSS le permite suavizar modificar valores de las propiedades CSS:

Ejemplos

En el elemento DIV establece .ng-hide -tiempo de clase, myChange se ejecuta la animación, será vertical uniforme de 100px a 0:

<Style>
@keyframes myChange {
de {
altura: 100px;
} A {
altura: 0;
}
}
div {
altura: 100px;
background-color: azul claro;
}
div.ng-ocultar {
animación: 0.5s myChange;
}
</ Style>

Trate »