Angularjs implement JavaScript animation effect detailed _angularjs

JavaScript animation effect in ANGULARJS application

Angularjs is a set of rich frameworks for creating single-page Web applications that bring all the required functionality to build rich, interactive applications. One of the main features is that angular brings support for animations.

We can use animations to show that some of the changes are taking place in part of the application. In my last article, I talked about the support for CSS animations in angular applications. In this article, we'll see how JavaScript scripts can be used to generate animation effects in ANGULARJS applications.

Among the angular, the only difference between CSS and JavaScript is their definition. No difference prevents a 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 the JavaScript animation events that will be processed remain unchanged. The following 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 the previous article, but it does not mention the corresponding CSS classes because we do not need them to define JavaScript animations. All of these events will only occur after the application module has loaded the Nganimate module. Now let's take a look at how to get these instructions to move.

Customizing the syntax for angular animations

The following is a basic framework for customizing JavaScript animations:

 
Angular.module (' Coursesapp '). Animation ('. Name-of-animation '), function (<injectables>) {return
 {
 Event:function (Elem, done) {
  //logic to animation done ();};
});
 

Here are some important things to remember when writing JavaScript animations in Angularjs:
1. The name of the animation begins with a dot (.)

2. All animation behavior accepts two parameters:

• An object in the DOM element that is currently running an animation, either a Jqlite object that is loaded before jquery is Angularjs loaded, or a jquery object.

• A callback function at the end of an animation. The action of the instruction corresponds to a pause until the callback function is invoked.

We have a number of JavaScript libraries, like jquery, Greensock, Anima, and several other libraries that make it easy to write animations. To keep it simple, I'm using jquery in this article to create animations. To learn about several other libraries, you can access their corresponding websites.

Let Ng-view move.

Animations that are used on a ng-view instruction run when you switch Angularjs applied views.

The following is the visual effect of 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 sliding effect when a view enters the screen. The done method is then passed in as a callback function. This is to indicate that the animation has ended and that the Angularjs frame can now continue with the next action.

Note the method that the animate () method is called. We don't have to convert this element into a jquery object because jquery is loaded before loading the ANGULARJS.

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

Ng-repeat Animation

Ng-repeat is a very important instruction in the commands you can choose to use. There are also two basic operations instructions for filtering and sorting. Add, move, or remove the corresponding instruction according to the action you are performing.

The following demo uses some basic animations, and you can see the corresponding animation effects when the 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
  }, do);
 },
 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 Ng-hide style classes for the target element. In order 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 class. This allows us to examine the class and make appropriate changes to the code.

Here is an animated example code that uses the ng-hide instruction to implement an element's fading fade effect:

Courseappanimations.animation ('. Hide-animation ', function () {return
 {
 beforeaddclass:function) (element, ClassName, done) {
  if (className = = ' Ng-hide ') {
  element.animate ({
   opacity:0
  },500, done);
  } else {do
  ();
  }
 },
 removeclass:function (element, className, done) {
  if (className = = ' Ng-hide ') {
  element.css (' opacity ', 0);
  Element.animate ({
   opacity:1
  }, done);
  } else {done
  ();
}}};

Let the custom command move.

In order for custom instructions to animate, we need to use the $animate service. Although $animate services are part of the ANGULARJS core framework, it is also necessary to load nganimate to make this service the most effective.

Using the same example in the previous article, we will present a list of the pages of the course. We create an instruction to display the details of the course in the grid, and the contents of the grid change when you click the "View Statistics" link. Let's add an animation to render the transformation effect to the user.

When the conversion animation begins, we will add a CSS class tag and, at the end, remove the class tag. The following is a 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 browser developer tool, we find that the switching-active and Switching-add two class tags are being quickly added and then removed when we look at the instruction elements. We can view the effects of animations by defining a CSS conversion style or a custom JavaScript animation. Here is a simple CSS conversion style that can be used for the instructions mentioned above, and for simplicity we remove a specific prefix:

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

Alternatively, there is a jquery-written animation 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
  ();}}}
);
 

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

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

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

Conclusion

Animation, when used properly and normally, will bring anger to the application. As we've seen, ANGULARJS provides a variety of support for CSS and JavaScript animations. You can choose one of them according to the team.

However, using too much animation will make the application slow, and for the user, this will make the application look like I'm not human. Therefore, you must be careful and optimize the use of this tool.