Code to implement some animation effects in the AngularJS application

  • 2020-06-15 07:49:26
  • OfStack

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


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

All JavaScript animation events that will 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 similar to the previous article, but the corresponding CSS classes are not mentioned because we do not need them to define the JavaScript animations. All of these events occur only after the application module has loaded the ngAnimate module. Now let's look at 1 and see how to get these commands to move.
Customize the syntax for Angular animations

Here is a basic framework for custom JavaScript animations:



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

Here are 1 points to keep in mind when writing JavaScript animations in AngularJS:

The name of the animation begins with the dot (.) All animation actions take two parameters: 1 object in the DOM element that is currently running the animation is either an jQlite object that was loaded before jQuery did not catch up with AngularJS or an jQuery object. A callback function at the end of an animation. 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 it easy to write animations. To keep things simple, I'm using jQuery in this article to create animations. To learn about the other libraries, you can visit their corresponding websites.

Get ng-ES59en moving

Animations used on 1 ng-ES63en instruction run when switching views of AngularJS applications.

Here's what the animation looks like 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);
 }
 };
});

This 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 is over and that the AngularJS frame can now proceed to the next action.

Notice the method that the animate() method is called. We don't have to convert this element to an jQuery object because jQuery is already loaded before AngularJS is loaded.

Now we need to apply this animation to the ng-ES83en directive. Although this animation is defined in JavaScript, by convention we use an class tag to apply it to the target instruction.


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

ng - repeat animation
ng-repeat is one of the most important instructions you can choose to use. The other two basic operations are filtering and sorting. Add, move, or remove instructions based on the action being performed.
Here are some basic animations that you can see when changes occur.


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-ES108en directive is used to add or remove the target element's ES109en-ES110en style class. To use an animation, we often need to add or remove css styles. This effect is achieved by passing the class name to the animation handler class. This allows us to examine the class and make appropriate changes to the code.

The following is a sample code of an animation, using the ng-ES115en instruction to achieve the effect of elements fade and fade:


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();
  }
 }
 };
});


Make custom commands work

To animate the custom instructions, we need the $animate service. Although the $animate service is a part of the AngularJS core framework, ngAnimate needs to be loaded to make the most of it.

Using the same example from the previous article, we will present a one-page course list. We create a directive to display the details of the course in the grid, and the content in the grid changes when the link "View Statistics" is clicked. Let's add an animation to present the transformation effect to the user.

When the transformation animation starts, we will add an CSS class tag and remove the class tag at the end. Here is the 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();
  });
  });
 }
 };
});


As you can see, we perform this action at the end of the animation. In the developer tools of the browser, when we look at the directive elements, we see that the switching-ES142en and ES143en-ES144en class tags are quickly added and then removed. You can view the animation by defining an CSS transform style or a custom JavaScript animation. Here is a simple CSS transform style that can be used for the instructions mentioned above, with the specific prefix removed for simplicity:



.det-anim.switching {
 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:


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();
  }
 }
 }
});

Among these animations, if it can be applied to a built-in instruction, it can also be applied to a custom instruction:


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

You can see all of the above animations in action on the sample page.

conclusion

Animation, when applied properly and properly, brings life 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 your team.

However, using too much animation will slow the application down and make it look like i is not user-friendly for the user. Therefore, this tool must be used carefully and optimally.


Related articles: