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_
Top Related