![Page 1: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/1.jpg)
Desarrollo de Aplicaciones Web con AngularJS -Animaciones
Christian Portilla Pauca
![Page 2: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/2.jpg)
Contenidos
Que es una animacion? Que se necesita?Que hace ngAnimate?Animaciones con CSS
![Page 3: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/3.jpg)
Que es una animacion?
Una animacion es cuando la transformacion de un elemento html da la ilusion de movimiento.
![Page 4: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/4.jpg)
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>
![Page 5: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/5.jpg)
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
![Page 6: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/6.jpg)
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
![Page 7: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/7.jpg)
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
![Page 8: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/8.jpg)
Que hace ngAnimate?
ng-move cuando el elemento html cambia de posicion el elemento HTML tendra un conjunto de valores de clase CSS
![Page 9: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/9.jpg)
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)
![Page 10: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/10.jpg)
Animaciones con CSS
Transiciones css o animaciones css para animar elementosCambiar propiedades suavemente desde un valor hacia otro
![Page 11: 14 desarrollo de aplicaciones web con angular js animaciones](https://reader036.vdocuments.co/reader036/viewer/2022062412/5879c0ee1a28abb42a8b50cf/html5/thumbnails/11.jpg)
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_