14 desarrollo de aplicaciones web con angular js animaciones https://www.youtube.com/playlist?list=PLq0g-O2tr8LU-Il71eScRNb8H1CnsLF9_ https://www.youtube.com/watch?v=DWlz-aHdKC8&list=PLq0g-O2tr8LU-Il71eScRNb8H1CnsLF9_&index=14

1. Desarrollo de Aplicaciones
Web con AngularJS -
Animaciones
Christian Portilla Pauca

2. Contenidos
 Que es una animacion?
 Que se necesita?
 Que hace ngAnimate?
 Animaciones con CSS

3. Que es una animacion?
 Una animacion es cuando la transformacion de
un elemento html da la ilusion de movimiento.

4. 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/angula
rjs/1.4.8/angular-animate.js"></script>

5. 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

6. 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

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

8. Que hace ngAnimate?
ng-move cuando el elemento html cambia de
posicion
el elemento HTML tendra un conjunto de valores
de clase CSS

9. Que hace ngAnimate?
ng-hide añadera estos valores de clase:
ng-animate
ng-hide-animate
ng-hide-add (elemento oculto)
ng-hide-remove (elemento mostrado)
ng-hide-add-active (elemento ocultado)
ng-hide-remove-active (elemento mostrado)

10. Animaciones con CSS
Transiciones css o animaciones css para animar
elementos
Cambiar propiedades suavemente desde un valor
hacia otro

11. Fin
Mail: xhrist14n@gmail.com
Blog: http://javascriptx.wordpress.com
Site: www.christianportilla.com
Video:
https://www.youtube.com/watch?v=DWlz-
aHdKC8
Lista de Videos:
https://www.youtube.com/playlist?list=PLq0g-
O2tr8LU-Il71eScRNb8H1CnsLF9_