Code to implement some animation effects in AngularJS applications_AngularJS

In Angular, the only difference between CSS and JavaScript is their definition. There is no difference that prevents the defined animation from being used. First, we need to load the ngAnimate module into the root module of our application.

angular.module('coursesApp', ['ngAnimate']);

All JavaScript animation events that will be handled remain unchanged. The following is a list of directly supported animations and their corresponding different behaviors:

Command event set

• ng-view
• ng-include
• ng-switch
• ng-if enter
• leave
• ng-repeat enter
• leave
• move
• ng-show
• ng-hide
• ng-class add
• remove

The above list is the same as the previous article, but the corresponding CSS classes are not mentioned because we do not need them to define JavaScript animations. All these events will only be generated after the application module loads the ngAnimate module. Now let's take a look at how to make these commands work.
Syntax for customizing Angular animations

The following is a basic framework for custom JavaScript animation:

angular.module('coursesApp').animation('.name-of-animation', function(<injectables>) {
 return {
 event: function(elem, done){
  //logic of animation
  done();
 }
 };
});

Here are some key points to remember when writing JavaScript animations in AngularJS:

• The name of the animation starts with a dot (.)
• All animation behaviors accept two parameters:
• An object in the current DOM element that is about to be animated is either a jQlite object that was loaded before jQuery loaded it before AngularJS, or a jQuery object.
• A callback function when the animation ends. The action corresponding to the instruction is suspended until the callback function is called.

We have several JavaScript libraries like jQuery, Greensock, Anima and several others that make writing animations easy. To keep things simple, I'm using jQuery to create animations in this post. To learn about several other libraries, you can visit their corresponding websites.

Let ng-view move

An animation used on an ng-view directive runs when switching views in an AngularJS application.

The following is the visual effect caused by the animation when a view is appearing:

courseAppAnimations.animation('.view-slide-in', function () {
 return {
 enter: function(element, done) {
  element.css({
  opacity: 0.5,
  position: "relative",
  top: "10px",
  left: "20px"
  })
  .animate({
  top: 0,
  left: 0,
  opacity: 1
  }, 1000, done);
 }
 };
});

The above creates a slide-in effect when a view enters the screen. The done method is passed in as a callback function. This is to indicate that the animation has ended and now the AngularJS framework can continue with the next action.

Note the method in which the animate() method is called. We don't have to convert this element into a jQuery object because jQuery is loaded before AngularJS is loaded.

Now we need to apply this animation effect to the ng-view directive. Even though the animation is defined in JavaScript, by convention we use a class tag to apply it to the target directive.

<div ng-view class="view-slide-in"></div>

ng-repeat animation
Among the instructions you can choose to use, ng-repeat is a very important instruction. There are two basic operation instructions: filtering and sorting. Add, move, or remove corresponding instructions based on the operation performed.
The following demonstration uses some basic animations. When changes occur, you can see the corresponding animation effects.

courseAppAnimations.animation('.repeat-animation', function () {
 return {
 enter : function(element, done) {
  console.log("entering...");
  var width = element.width();
  element.css({
  position: 'relative',
  left: -10,
  opacity: 0
  });
  element.animate({
  left: 0,
  opacity: 1
  }, done);
 },
 leave : function(element, done) {
  element.css({
  position: 'relative',
  left: 0,
  opacity: 1
  });
  element.animate({
  left: -10,
  opacity: 0
  }, done);
 },
 move : function(element, done) {
  element.css({
  left: "2px",
  opacity: 0.5
  });
  element.animate({
  left: "0px",
  opacity: 1
  }, done);
 }
 };
});

Ng-hide animation

The ng-hide directive is used to add or remove the ng-hide style class of the target element. In order to use an animation, we often need to add or remove css styles. Pass the class name to the animation class to achieve this effect. This allows us to inspect the class and make appropriate changes to the code.

The following is an animation sample code that uses the ng-hide directive to achieve the fade-out effect of elements:

courseAppAnimations.animation('.hide-animation', function () {
 return {
 beforeAddClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.animate({
   opacity: 0
  },500, done);
  } else {
  done();
  }
 },
 removeClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.css('opacity',0);
  element.animate({
   opacity: 1
  }, 500, done);
  } else {
  done();
  }
 }
 };
});

Let custom commands come into play

In order to animate custom instructions, we need to use the $animate service. Although the $animate service is part of the core framework of AngularJS, ngAnimate needs to be loaded for this service to play its full role.

Using the same example from the previous article, we will present a one-page list of courses. We create a command to display the details of the course in a grid, and the contents of the grid will change when the "View Statistics" link is clicked. Let's add an animation to present this transition to the user.

When the transition animation starts, we will add a CSS class tag and when it ends, remove the class tag. Here is sample code for this directive:

app.directive('courseDetails', function ($animate) {
  return {
  scope: true,
  templateUrl: 'courseDetails.html',
  link: function (scope, elem, attrs) {
   scope.viewDetails = true;
   elem.find('button').bind('click', function () {
   $animate.addClass(elem, "switching", function () {
    elem.removeClass("switching");
    scope.viewDetails =! scope.viewDetails;
    scope.$apply();
  });
  });
 }
 };
});

正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：

.det-anim.switching {
 transition: all 1s linear;
 position: relative;
 opacity: 0.5;
 left: -20px;
}

又或者，这里有一个jQuery写的动画，可以用于同样的指令：

courseAppAnimations.animation('.js-anim', function () {
 return {
 beforeAddClass: function(element, className, done) {
  if (className === 'switching') {
  element.animate({
   opacity: 0
  },1000, function (){
   element.css({
   opacity: 1
   });
   done();
  });
  }
  else {
  done();
  }
 }
 }
});

这些动画当中，如果它可以应用于内建的指令上，它同样也可以被应用到自定义的指令上：

<div course-details 
  class="det-anim"
  title="{{course.title}}">
</div>

你可以在示例页面看到以上所有的动画运行时的效果。
 
结论

动画，当被适合并正常的运用时，将给应用程序带来生气。正如我们所看到的，AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。

但是，使用太多的动画将会使得应用程序变得缓慢，而对于用户来，这将使应用程序看起来i不够人性化。所以，必须小心并最优化的使用这件利器。