1. Home
  2. AngularJS Animación

El mejor tutorial de AngularJS Animación en 2024. En este tutorial podrás aprender ¿Cuál es la animación?,ngAnimate hecho?,El uso de CSS Animación,Las transiciones CSS,CSS Animación,

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.w3write.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 »

Hot Tutorials

Contact US

AngularJS Animación
10/30