AngularJS – ngAnimate

Just playing around ng-animate directive, which is newly introduced in v1.1.4. The following is a working example, as a result of my trial.

http://jsfiddle.net/EafTD/1/

ngAnimate can be used along with ngRepeat or ngShow/ngHide directives which adds/deletes items in the screen. Simple animation just works with several CSS definitions, without requiring additional JavaScript code. It’s interesting. The power of declarative programming is getting stronger as more directives are being introduced. View logics are getting more simple.

The following are the sites which I have referred to , and they have examples and tutorials.

html

<div ng-app="app" ng-controller='AnimateCtrl'>
    <div class="page-header">
      <h3>Animate</h3>
    </div>

    <div>
      Filter (Default Directive) :
      <input type="text" ng-model="search" autofocus>
    </div>

    <div class="box" ng-repeat="item in items | filter:search" ng-animate="'animate'">
      {{item}}
    </div>

    <br><br>

    <div>
      Filter (Custom Directive) :
      <input type="text" ng-model="search2">
    </div>

    <div class="box" ng-repeat="item2 in items2 | filter:search2" ng-animate="'animate2'">
      {{item2}}
    </div>
</div>

javascript

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

function AnimateCtrl($scope) {
  $scope.items  = ["test1", "aaa", "bbb", "abc", "bcd"];
  $scope.items2 = ["test1", "aaa", "bbb", "abc", "bcd"];
}

var animationFunction = function(startCSS, endCSS) {
  return function() {
    return {
      setup : function(element) {
        element.css(startCSS);
      },
      start : function(element, done) {
        element.animate(endCSS, function() {
          done();
        });
      }
    }
  }
};

app.animation('animate2-enter', animationFunction({'opacity': 0}, {'opacity' : 1}));
app.animation('animate2-leave', animationFunction({'opacity': 1}, {'opacity' : 0}));

css

body, div {
  font-family: 'Donegal One', serif;
}

.box {
  border: 2px solid;
  width: 200px;
  height: 50px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  border-radius: 10px;
}

.animate-enter, .animate-leave, .animate-move {
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;

  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);

  opacity: 0;
}

.animate-enter.animate-enter-active {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);

  opacity: 1;
}


.animate-enter-setup {
}

.animate-leave-setup {
}
Advertisements

Posted on June 5, 2013, in JavaScript. Bookmark the permalink. 1 Comment.

  1. kylehayhurst

    that’s pretty sweet, so simple too, I havent dove into angular js yet, I guess i’m just waiting for a good idea to use it with but imagine similar functionality with search results in more of a table format

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: