Getting started with AngularJS Animations

Angular has been the third most exciting technology of the past year* and why shoudn't it be. Angular has changed the way Web Applications were being built and perceievd by the end audience.

I will not go into much detail about Angular.js, there are a tons of blogs on that. In this blog we will be touching an old thing or i should say the very understimated part of AngularJS i.e., Animations.

Animations in Angularjs have been rebuilt from scratch and are now supported by the ngAnimate module which needs to be included in your angular app to have the animations working. You can download the lastest angular-animate.js from the angular site.

     var app = angular.module('myApp', ['ngAnimate']);

We will be focusing on a very basic ng-repeat animation to get started with things quickly. Lets see the example below:

    //app.js

    app.controller('AnimateController', ['$scope', '$timeout', function($scope, $timeout){
      $scope.title = 'First Step at Angular Animations!';

      $scope.addToList = function(){
        $scope.list.push({title: $scope.listElement});
      };

      $timeout(function(){
        $scope.list = [
          {title: 'hello World'}, 
          {title: 'hello World'}, 
          {title: 'hello World'},
          {title: 'hello World'}
        ];
      });    
    }]);    


The HTML <body> structure of the page with the animated list:

    //index.html 

    <body ng-controller='AnimateController'>
      <h3>{{title}}</h3>

      <input type='text' ng-model='listElement'> 
      <button class='btn-success' ng-click='addToList()'>Add</button>

      <ul>
        <li class='animate-list' ng-repeat='item in list'>
          {{item.title}}
        </li>
      </ul>    
    </body>


Now comes the important CSS file with the class that has all the animations written in it.

    //app.css

    .animate-list {
      line-height:40px;
      box-sizing:border-box;
    }

    .animate-list.ng-move,
    .animate-list.ng-enter,
    .animate-list.ng-leave {
      -webkit-transition:all ease-out 0.5s;
      transition:all ease-out 1s;
    }

    .animate-list.ng-leave.ng-leave-active,
    .animate-list.ng-move,
    .animate-list.ng-enter {
      opacity:0;
      max-height:0;
    }

    .animate-list.ng-leave,
    .animate-list.ng-move.ng-move-active,
    .animate-list.ng-enter.ng-enter-active {
      opacity:1;
      max-height:40px;
    }


When ngRepeat directive puts an element in the DOM, an ng-enter animation is triggered. Once the animation is instantiated, the $animate service puts the ng-enter and ng-enter-active classes on the element and the same goes for when the element is removed from the DOM.

We thus define the animation with respect to those classes that are added at runtime on the element. And that's what we have done above, the classes ng-move, ng-enter, ng-leave are all defined above to have the ease-out animation.

You can try the above code at this plunker : Live Demo

Hope this helps. I will be writing more blogs on AngularJS in the coming time as it continues to amaze me.

*Source: stackoverflow.com

comments powered by Disqus