Cómo Crear Animaciones en AngularJS con ngAnimate

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

Cuando se usa apropiadamente, animaciones pueden hacer una divertida aplicación de web para utilizar. Los navegadores modernos son capaces de animar elementos de una página web usando solo CSS. Si está usando AngularJS en uno de sus proyectos, puede utilizar el módulo de ngAnimate para añadir animación a él de la forma Angular.

El módulo ngAnimate permite añadir CSS así como animaciones basadas en JavaScript a sus proyectos. Las animaciones basadas en CSS incluyen fotogramas clave y las transiciones. Las animaciones basadas en JavaScript deben ser registrados utilizando module.animation(). En este tutorial, usted aprenderá cómo agregar animaciones CSS incorporado consciente de animación AngularJS las directivas para hacer más atractivo sus aplicaciones.

Los Conceptos Básicos

Lo primero que tienes que hacer para agregar animaciones es incluir angular-animate.js en su proyecto. Una vez hecho esto, puede incluir el módulo de ngAnimate como una dependencia en su aplicación para empezar a animar diferentes elementos.

1	angular.module('app', ['ngAnimate']);

Aquí está una lista de diferentes animación directivas conscientes y los eventos de animación que puede utilizar para animarlos:

ng-repeat puede detectar eventos enter, leave y move.
ng-view, ng-include, ng-switch y ng-if puede detectar eventos enter y leave.
ng-show, ng-hide y ng-class pueden detectar eventos add y remove.
ng-message puede detectar también eventos enter y leave.

Usted debe recordar que estos ganchos de animación no están habilitados de forma predeterminada; sólo llegan a activadas después de agregar el módulo de ngAnimate a su aplicación.

Animación de ng-if utiliza transiciones CSS3

El ng-if Directiva en AngularJS se usa para agregar o quitar elementos de la DOM basado en el valor de una expresión dada. Cuando la expresión se evalúa como false, el elemento se elimina del DOM. Cuando la expresión se evalúa como true, un clon del elemento se reinserta en el DOM. Esta adición y retiro de elementos es instantánea. Sin embargo, puede animar los elementos que se eliminan o recrearon con el módulo ngAnimate.

Si los elementos se agregan a la DOM, puede utilizar las clases de ng-entrar-active y ng-enter para animarlos. El transición código así como el estado inicial de la animación se agregan dentro de la clase ng-enter. El estado de la animación final se agrega la clase ng-entrar-active. Aquí está el código para mostrar algunas barras rojas por animar su altura.

.red-bar.ng-enter {
  transition:all ease-in 0.25s;
  height: 0px;
}

.red-bar.ng-enter.ng-enter-active {
  height: 30px;
}

Del mismo modo, también se puede aplicar una animación para ocultar las barras utilizando las clases ng-leave y ng-leave-active. He dejado a la animación para la eliminación de las barras rojas que se puede ver claramente la diferencia entre Estados animados y no animados.

Please accept marketing cookies to load this content.

Animación de ng-view usando CSS3 Transitions

La Directiva ng-view en AngularJS se utiliza como contenedor para volver a cargar una parte de la página cuando el usuario cambia entre diferentes puntos de vista.

Al igual que la adición y eliminación de elementos usando ng-if, este proceso también ocurre muy rápidamente. Si desea animar las entrada y salida de diferentes elementos en la vista, uso el mismo viejas clases ng-enter, ng-enter-active, ng-leave y ng-leave-active.

Además de estas cuatro clases, es también una clase ng-animate. Durante el curso de la animación, esta clase también se agrega a todos los elementos que necesitan ser animados. Se puede utilizar para proporcionar todas las reglas CSS que deben aplicarse en el curso de la animación. Aquí está un ejemplo:

.planet-view.ng-animate {
  transition: all ease 0.4s;
  position: absolute;
}

.planet-view.ng-enter {
  top: 200px;
  opacity: 0;
}

.planet-view.ng-leave, 
.planet-view.ng-enter.ng-enter-active {
  top: 0;
  opacity: 1;
}

.planet-view.ng-leave.ng-leave-active {
  top: -200px;
  opacity: 0;
}

Como se puede ver en el código anterior, se ha aplicado un período de transición de 0,4 segundos en todas las propiedades. Cuando la información de un planeta específico entra en el punto de vista, se inicia con una opacidad de cero y la posición top a 200px. Al mismo tiempo, los elementos que están a punto de abandonar el punto de vista tienen una opacidad de 1.

Al final de la transición, los elementos ingresa al llegar a la posición superior de la vista y ser completamente opacos. Del mismo modo, los elementos dejando animan a una posición 200px por encima de la vista y se descoloran lejos. Esto nos da un efecto agradable donde la información parece que se desvanecen el fondo de la página y se descoloran hacia fuera en la parte superior de la página.

En la siguiente demo ng-view, trate de hacer clic en el nombre de diferentes planetas para ver laanimaciones enter y leave en acción.

La información sobre la composición de la atmósfera de planetas terrestres se ha tomado de esta página.

Please accept marketing cookies to load this content.

Animación de ng-repeat usando animaciones de fotogramas clave

La Directiva ng-repeat en AngularJS se utiliza para crear instancias de una plantilla de una vez por artículo en una colección dada. Esta Directiva se utiliza cuando intenta ordenar, filtrar, agregar o quitar elementos de una colección. Hay tres eventos de animación que se pueden accionar con ng-repeat.

enter: este evento se activa cuando se agrega un nuevo elemento a la lista o un elemento de la lista se revela después de aplicar un filtro.
leave: este evento se activa cuando se elimina un elemento de la lista o un elemento de la lista se filtra hacia fuera.
move: este evento se desencadena cuando un elemento adyacente se filtra y el elemento interesado necesita reordenar.

En las dos últimas secciones, han utilizado las transiciones CSS para animar diferentes elementos. En esta sección, usted aprenderá cómo animar diferentes elementos utilizando la animación de fotograma clave. Proporcionaré el código para la transición y la animación de fotogramas clave para que puedan ver la diferencia entre los dos.

Aquí está el código para animar los elementos de transición:

.task-item.ng-enter,
.task-item.ng-leave {
  transition:all linear 0.25s;
}

.task-item.ng-leave {
  top: 0;
  opacity: 1;
}

.task-item.ng-leave.ng-leave-active {
  top: 200px;
  opacity: 0;
}

.task-item.ng-enter{
  opacity:0;
  top: -500px;
}

.task-item.ng-enter.ng-enter-active {
  opacity:1;
  top: 0px;
}

Como se puede ver, este código es muy similar al código de transición que hemos estado utilizando hasta ahora. La puesta en marcha los Estados se definen en ng-enter y ng-leave. Los Estados que se definen en el ng-enter-active y ng-leave-active.

El código siguiente recrea el mismo efecto usando animaciones de fotogramas clave.

@keyframes added {
  from {
    opacity: 0;
    top: -500px;
  }
  to {
    opacity: 1;
    top: 0px;
  }
}

@keyframes deleted {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: 200px;
    opacity: 0;
  }
}

.task-item.ng-enter {
  animation: 0.25s added;
}

.task-item.ng-leave {
  animation: 0.25s deleted;
}

Esta vez, estamos utilizando la propiedad de animation CSS para añadir la animación. La animación actual se define en @keyframes. El estado inicial y final de diferentes elementos se ha definido dentro de los fotogramas clave de sí mismos. Tenga en cuenta que no tenemos que utilizar las clases ng-enter-active y ng-leave-active más. Una de las ventajas del uso de fotogramas clave es que ahora la animación puede mucho más complicado que una simple transición.

Intento agregar y eliminar algunas de las tareas en la siguiente demo para ver la animación en acción.

Please accept marketing cookies to load this content.

Uso de ngAnimate con ngMessages

Envato Tuts+ ha publicado un tutorial sobre la validación de formularios usando ngMessages. En la última sección de este tutorial, aprendió a mostrar mensajes de error sólo después de que un usuario ha tocado realmente un campo de entrada. Todos los mensajes de error en este tutorial aparecen y desaparecen al instante.

Si desea agregar una animación sutil para mostrar u ocultar los mensajes de error, puede hacer tan fácilmente con el módulo ngAnimate. Como se mencionó al principio de este tutorial, ng-message puede detectar enter y leave de eventos. Esto significa que puede utilizar las clases ng-enter y ng-enter-active para especificar el estado inicial y final de los mensajes de error en la actualidad que se muestra a los usuarios. Asimismo, puede utilizar las clases de ng-leave-activa y ng-leave para especificar el estado inicial y final de los mensajes de error que están en proceso de ser oculta a los usuarios.

Aquí es un ejemplo de cambio de la propiedad de opacidad para los mensajes de error.

.error-msg.ng-enter {
  transition: 0.5s linear all;
  opacity: 0;
}
.error-msg.ng-enter.ng-enter-active {
  opacity: 1;
}

He añadido una clase de error-msg a todos los mensajes de error, y usted puede agregar sus propias clases y actualizar el código en consecuencia. En este caso, no he solicitado ninguna animación de mensajes de error que se han convertido en inválidos y no deben mostrarse a los usuarios. Esto significa que desaparecerá al instante. Aquí está la demo que muestra cómo utilizar ngMessages y ngAnimate juntos.

Please accept marketing cookies to load this content.

Conclusión

Este tutorial te enseña cómo agregar animación a tus aplicaciones web de AngularJS utilizando el módulo ngAnimate. También aprendes cómo aplicar animaciones diferentes a un elemento basado en el evento desencadenante. La sección final cubierto cómo utilizar el módulo de ngAnimate con otros módulos como ngMessages para agregar animaciones agradables para mensajes de error.

Una cosa que tienes que tener en cuenta durante el uso de animaciones es que no deben abusarlos. Muchas animaciones pueden distraer a los usuarios de la función principal de la aplicación. Sólo utilice animaciones cuando crees que realmente puede mejorar la experiencia del usuario.

Espero que hayas disfrutado este tutorial. Si usted tiene cualquier consejos, sugerencias o preguntas relacionadas con el módulo de ngAnimate, por favor comenten.