Cómo hacer animaciones con AngularJS: El servicio $animate

AngularJS

En este post explicaré cómo realizar animaciones con angularJS. Aunque AngularJS nos proporcione el servicio $animate, no vamos a interactuar con él directamente. En su lugar usaremos CSS ya que AngularJS no proporciona ninguna función como podría ser jQuery.

Para poder animar con AngularJS será preciso llamar al módulo ngAnimate, por tanto, será preciso descargarlo de la página oficial y llamarlo de la misma manera que ngRoute.

XHTML
1
2
<script src="angular.js"></script>
<script src="angular-animate.js"></script>

Antes de continuar, es necesario que sepas en que consisten las transiciones y animaciones en CSS. Aunque voy a emplear ejemplos sencillos, te recomiendo que veas este post sobre transiciones y este sobre animaciones en CSS para que puedas sacar el máximo partido a este tutorial.

Aplicar animaciones con angularJS

Como comenté anteriormente, no trabajaremos directamente con el servicio $animate. En su lugar, vamos a emplear directivas y nomenclaturas especiales (clases) cuando escribamos nuestro CSS ya que el servicio $animate tiene como medio los ganchos (hooks) que empleemos en nuestro CSS y serán los que activan las animaciones.

En el siguiente ejemplo lo que vamos hacer es que al pulsar un botón mostremos un texto. Para que el texto no se muestre de manera brusca, emplearemos una transición,

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>Animaciones angularJS</title>
    <script src="angular.js"></script>
    <script src="angular-animate.js"></script>
    <script>
        var app = angular.module('app', ['ngAnimate']);
        app.controller('ejemploAnimacion', function ($scope) {
            $scope.activarAnimacion = false;
        });
    </script>

Comenzamos llamando al modulo ngAnimate y creamos un controlador que se encargará de gestionar la animación. La variable activarAnimacion se encargará de mostrar o no el texto.

El siguiente paso será crear el CSS que será el eje principal de la animación.

CSS
1
2
3
4
5
6
7
8
9
10
11
    <style>
        /* inicio */
        .mi-animacion.ng-enter {
            transition: .5s all;
            opacity: 0;
        }
        /* fin */
        .mi-animacion.ng-enter.ng-enter-active {
            opacity: 1;
        }
    </style>

En principio no parece algo nuevo pero, salvo por 2 clases que nos proporciona Angular: ng-enter y ng-enter-acitve. Estas clases representan eventos que indican el inicio de la animación  (ng-enter) y su respectivo fin (ng-enter-active) y serán los ganchos que empleará ngAnimate.

Y el HTML con las directivas de Angular correspondientes

XHTML
1
2
3
4
5
6
<body ng-controller="ejemploAnimacion">
<button ng-click="activarAnimacion=!activarAnimacion">Mostrar</button>
<div class="mi-animacion" ng-if="activarAnimacion">
    Este texto ya no está oculto.
</div>
</body>

Al pulsar el boton (ng-click) el valor de activarAnimacion será su contrario (de false a true y viceversa). Y mediante la directiva ng-if , la cuál dependerá del valor activarAnimacion, se encargará de ejecutar la animación. Y por qué de esto? Cuando ng-if contenga true, al div ‘mi-animacion’ le añadirá la clase ng-enter-active. Muchas directivas de angular ejecutan animaciones cuando un evento ocurre gracias al servicio $animate.

Directivas y eventos de animación

Directiva Eventos
ngRepeat enter, leave, y move
ngView enter y leave
ngInclude enter y leave
ngSwitch enter y leave
ngIf enter y leave
ngClass add yremove
ngShow y ngHide add y remove (ngHide)

En el ejemplo anterior empleamos ngIf, por tanto, los eventos ng-enter y ng-leave son soportados. Vamos a darle la misma transición cuando se quiera ocultar el texto.

CSS
1
2
3
4
5
6
7
8
.mi-animacion.ng-leave {
transition: .5s all;
opacity: 1;
}
 
.mi-animacion.ng-leave.ng-leave-active {
opacity: 0;
}

En esta ocasión sería al revés, empezamos con opacidad 1 y cuando la animación se complete será 0. Todo ello con una transición de 0.5s. Basicamente, el sufijo -active nos sirve para indicar el inicio y final de la animación. 

See the Pen Animaciones en AngularJS – Ejemplo 1 by guidacode (@guidacode) on CodePen.0

Cuando ocurren los eventos

Vamos a ver un poco más en detalle cuando ocurren los eventos como enter, leave o add y qué directivas están implicadas.

Evento Descripción Clases
enter Cuando un contenido va a «aparecer». ng-enter, ng-enter-active
leave El elemento va a «desaparecer». ng-leave, ng-leave-active
move Solo sucede en ngRepeat, se produce cuando un elemento del DOM es movido de una posicion a otra. ng-move, ng-move-active
add Cuando se agrega una clase CSS ng-add, ng-add-active
remove Cuando se quita una clase CSS ng-remove, ng-remove-active

Voy a poner un último ejemplo de animaciones con AngularJS. Supongamos que tenemos una lista de enemigos y queremos darle una animación tanto a la hora de agregar como eliminar. Comenzamos declarando el controlador que contendrá la lista

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var app = angular.module('app', ['ngAnimate']);
 
app.controller('ejemploAnimacion', function ($scope) {
       $scope.activarAnimacion = false;
 
         $scope.enemigos = [
            {nombre: "Barry Kripke"},
            {nombre: "Brent Spiner"},
            {nombre: "Cooper-Wheaton War"},
            {nombre: "Dennis Kim"},
            {nombre: "The Jerusalem Duality"},
            {nombre: "The Proton Regeneration"},
            {nombre: "The Wheaton Recurrence"},
            {nombre: "Wil Wheaton"},
            {nombre: "Wilwheatonstinks.net"},
            {nombre: "Leslie Winkle"}
         ];
 
         $scope.agregarEnemigo = function() {
            $scope.enemigos.push($scope.enemigo);
            $scope.enemigo = {};
          };
 
           $scope.eliminarEnemigo= function(index) {
              $scope.enemigos.splice(index, 1);
           };
        });

Además de la lista, tenemos 2 funciones que serán llamados por los botones. La función agregar enemigo lo que hace es añadir al array de enemigos el enemigo que creamos en el formulario. En cuanto la función eliminarEnemigo(), está ascoaido a un botón que se crea junto la lista. Al recorrer la lista en el ng-repeat, que veremos a continuación, también le asignamos el índice como parámetro para que luego podamos eliminar el elemento del array con splice().

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="container">
  
    <div>
      <h1 class="text-center">Lista de enemigos</h1>
      <ul>
        <li ng-repeat="enemigo in enemigos" class="fade">
          {{enemigo.nombre}}
          <span ng-click="eliminarEnemigo($index)">X</span>
        </li>
      </ul>
    </div>
  
 
    <div>
      <input type="text" ng-model="enemigo.nombre" />
      <button ng-click="agregarEnemigo()">Añadir</button>
    </div>
  
</div>

Y ahora el diseño y las animaciones

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.text-center {
  text-align: center;
}
 
.container {
  max-width: 500px;
  margin: 0 auto;
}
 
ul{
  overflow: hidden;
}
 
li span {
  float: right;
  cursor: pointer;
  display: inline-block;
}
 
.fade {
  transition: 1s linear all;
  -webkit-transition: 1s linear all;
}
 
.fade.ng-enter {
  margin-left: -150px;
  opacity: 0;
}
 
.fade.ng-enter.ng-enter-active {
  animation-name: aparecer;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}
 
.fade.ng-leave {
  margin-left: 0px;
  opacity: 1;
}
 
.fade.ng-leave.ng-leave-active {
  animation-name: desaparecer;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
 
@keyframes aparecer {
  from {          
    margin-left: -150px;
    opacity: 0;
  }
  to {
    margin-left: 0px;
    opacity: 1;
  }
}
 
@keyframes desaparecer {
  from {          
    margin-left: 0px;
    opacity: 1;
  }
  to {
    margin-left: 150px;
    opacity: 0;
  }
}

Esta vez vamos a emplear animaciones con CSS. Básicamente cuando se añada un elemento del a la lista (ng-enter), partirá la «izquierda de todo» invisible y se irá desplazando hacia la derecha hasta que se muestre (margin-left:0). Como parte con una opacidad de 0 y termina con una de 1, el elemento a medida que avance irá apareciendo suavemente. Al eliminar un elemento (ng-leave) hará lo contrario, empezará con opacidad e irá despareciendo a medida que se desplaza. Todo ello con una transición de 1 segundo.

See the Pen Animaciones en AngularJS – Ejemplo 2 by guidacode (@guidacode) on CodePen.0

Espero que os haya gustado este tutorial sobre animaciones con AngularJS. A seguir picando 🙂