14 desarrollo de aplicaciones web con angular js animaciones

Desarrollo de Aplicaciones Web con AngularJS -Animaciones

Christian Portilla Pauca

Contenidos

Que es una animacion? Que se necesita?Que hace ngAnimate?Animaciones con CSS

Que es una animacion?

Una animacion es cuando la transformacion de un elemento html da la ilusion de movimiento.

Que se necesita?

Para hacer que la aplicacion este lista para animaciones, se debe incluir la libreria animate de Angularjs.<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>

Que hace ngAnimate?

El modulo de ngAnimate añade y remueve clases CSS.El modulo ngAnimate no anima tus elementos html, pero cuando se da un evento ngAnimate notifica a ciertos desencadenadores que permiten esconder o mostrar un elemento html

Que hace ngAnimate?

Las directivas en AngularJS las cuales son utiles para añadir o remover clases son las siguientes:ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if

ng-switch

Que hace ngAnimate?

ng-show tanto como ng-hide son directivas que permiten añadir o remover una clase.ng-enter cuando se ejecuta el evento enter.ng-leave cuando son removidos del dom

Que hace ngAnimate?

ng-move cuando el elemento html cambia de posicion el elemento HTML tendra un conjunto de valores de clase CSS

Que hace ngAnimate?

ng-hide añadera estos valores de clase:ng-animateng-hide-animateng-hide-add (elemento oculto)ng-hide-remove (elemento mostrado)ng-hide-add-active (elemento ocultado)ng-hide-remove-active (elemento mostrado)

Animaciones con CSS

Transiciones css o animaciones css para animar elementosCambiar propiedades suavemente desde un valor hacia otro

Fin

Mail: [email protected] Blog: http://javascriptx.wordpress.com Site: www.christianportilla.comVideo: https://www.youtube.com/watch?v=DWlz-aHdKC8Lista de Videos: https://www.youtube.com/playlist?list=PLq0g-O2tr8LU-Il71eScRNb8H1CnsLF9_