SoFunction
Updated on 2025-04-04

Code to implement some animation effects in AngularJS application

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.
 

('coursesApp', ['ngAnimate']);

All JavaScript animation events to be processed remain unchanged. Here is a list of directly supported animations and their corresponding different behaviors:

Instruction 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 in the previous article, but does not mention the corresponding CSS classes because we do not need to use them to define JavaScript animations. All these events will only occur after the application module has loaded the ngAnimate module. Now let's see how to make these instructions move.
The syntax of custom Angular animation

Here is a basic framework for custom JavaScript animations:

 

('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 begins with a dot (.)
  • All animation behaviors accept two parameters:
  • An object in the DOM element that is about to run the animation is either a jQlite object that was loaded before AngularJS is loaded, or a jQuery object.
  • A callback function at the end of an animation. The action corresponding to the instruction is paused until the callback function is called.

We have several JavaScript libraries, such as jQuery, Greensock, Anima and several other libraries that make it easy to write animations. To keep it simple, I'm using jQuery to create animations in this post. To learn several other libraries, you can visit their corresponding websites.
 
Let ng-view move

Animation used on an ng-view directive runs when switching views of AngularJS applications.

Here is the visual effect caused by an animation when a view is appearing:
 

('.view-slide-in', function () {
 return {
 enter: function(element, done) {
  ({
  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 show that the animation is over and now the AngularJS framework can continue with the next action.

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

Now we need to apply this animation effect to the ng-view directive. Although this animation is defined in JavaScript, we use a class tag to apply it to the target directive as agreed.
 

<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 command. There are two other basic operating instructions: filtering and sorting. Add, move, or remove the corresponding instructions according to the actions performed.
The following demonstration uses some basic animations, and you can see the corresponding animation effects when there is a change.
 

('.repeat-animation', function () {
 return {
 enter : function(element, done) {
  ("entering...");
  var width = ();
  ({
  position: 'relative',
  left: -10,
  opacity: 0
  });
  ({
  left: 0,
  opacity: 1
  }, done);
 },
 leave : function(element, done) {
  ({
  position: 'relative',
  left: 0,
  opacity: 1
  });
  ({
  left: -10,
  opacity: 0
  }, done);
 },
 move : function(element, done) {
  ({
  left: "2px",
  opacity: 0.5
  });
  ({
  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 processing class to achieve this effect. This allows us to check this class and make appropriate modifications to the code.

The following is an animation sample code, using the ng-hide directive to achieve the fading and gradual display effect of elements:
 

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


Let custom commands move

In order to make custom directives animate, we need to use the $animate service. Although the $animate service is part of the AngularJS core framework, ngAnimate is also required to load this service to play its greatest role.

Use the same example from the previous article, we will present a one-page course list. We create a command to display the details of the course in the grid, and the content in the grid will change when clicking the link "View Statistics". Let's add an animation to present this conversion effect to the user.

When the transformation animation starts, we will add a CSS class tag, and at the end, remove this class tag. Here is the sample code for this directive:
 

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


As you can see, we perform this action at the end of the animation. In the browser's developer tools, when we look at the directive elements, we will find that the switching-active and switching-add class tags are being quickly added and then removed. We can view the animation's effects by defining a CSS conversion style or a custom JavaScript animation. Here is a simple CSS conversion style that can be used for the above-mentioned instructions. For simplicity, we removed specific prefixes:

 

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

Or, here is an animation written by jQuery that can be used for the same instruction:
 

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

In these animations, if it can be applied to built-in instructions, it can also be applied to custom instructions:
 

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

You canSample pageSee all the animations running effects above.
 
in conclusion

Animation, when suitable and properly used, will bring anger to the application. As we have seen, AngularJS provides various support for both CSS and JavaScript animations. You can choose one of them based on the team's situation.

However, using too much animation will slow the application, which will make the application look unhumanized for users. Therefore, you must be careful and optimized to use this weapon.