Desarrollo de Aplicaciones Web Con AngularJS y Animaciones

Publicado el por

Desarrollo de Aplicaciones Web Con AngularJS y Animaciones

Angularjs provee de transiciones animadas basadas en css, por medio de directivas que se pueden usar agregando a modo de propiedades del html de la plantilla a editar.

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 inclouir la libreria animate de Angularjs.
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js

Que hace Animate?
El modulo de Animate añade y remueve clases CSS.
El modulo Animate no anima tus elementos html, pero cuando se da un evento Animate notifica a ciertos desencadenadores que permiten esconder o mostrar un elemento html, el elemento obtiene algunas clases predefinidas en las cuales se puede hacer uso de ciertas animaciones.
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

ng-show tanto como ng-hide son directivas que permiten añadir o remover una clase.
Las otras directivas añaden una clase con valor ng-enter cuando se ejecuta el evento enter, y un atributo ng-leave cuando son removidos del dom.
La directiva ng-repeat tambien añade un valor ng-move cuando el elemento html cambia de posicion.
Ademas durante la animacion, el elemento HTML tendra un conjunto de valores de clase CSS, el cual es removido cuando la animacion ha terminado.
Por ejemplo la directiva ng-hide añadera estos valores de clase:

    ng-animate
    ng-hide-animate
    ng-hide-add (si el elemento estara oculto)
    ng-hide-remove (si el elemento sera mostrado)
    ng-hide-add-active (si el elemento sera ocultado)
    ng-hide-remove-active (si el elemento sera mostrado)

Animaciones con CSS

Se puede hacer uso de transiciones css o animaciones css para animar elementos html, las animaciones CSS permite cambiar propiedades suavemente desde un valor hacia otro, con una duracion dada.

Mail: xhrist14n@gmail.com
Blog: https://javascriptx.wordpress.com
Site: www.christianportilla.com

Escrito por Christian Portilla Pauca

 

Deja un comentario