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:
Ocultar DIV: <input type = "checkbox " ng-modelo = "myCheck">
<Div ng-ocultar = "myCheck "> </ div>
</ Body>
Trate »
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
<H1> Ocultar DIV: <input type = "checkbox " ng-modelo = "myCheck"> </ h1>
<Div ng-ocultar = "myCheck "> </ div>
<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:
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:
@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 »