Code _ AngularJS

This article mainly introduces the code for implementing some animation effects in AngularJS applications. AngularJS is a popular JavaScript library. For more information, see Angular, the only difference between CSS and JavaScript is their definition. There is no difference in preventing the use of the defined animation. First, we need to load the ngAnimate module to the root module of our application.

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

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

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 list above is the same as the previous article, but does not mention the corresponding CSS classes, because we don't need them to define JavaScript animation. All these events are generated only when the ngAnimate module is loaded in the application module. Now let's take a look at how to get these commands started.
Custom Angular animation syntax

The following is a basic framework for customizing JavaScript animation:

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

There are some important points to remember when writing JavaScript animations in AngularJS:

• The animation name starts with a vertex (.).
• All animation behaviors take two parameters:
• An object in the DOM element that is about to run the animation is either a jQlite object that is loaded before jQuery is loaded in AngularJS or a jQuery object.
• The 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 animation writing easier. To keep it concise, I am using jQuery in this article to create an animation. To learn more about the other libraries, you can access their websites.

Make ng-view Dynamic

The animation used on an ng-view command runs when switching the view of AngularJS applications.

The following figure shows the visual effects of an animation when a view appears:

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 preceding figure shows the slide effect of a view. The done method is passed in as a callback function. This is to show that the animation has ended, and now the AngularJS framework can continue the next action.

Note the method called by the animate () method. We do not need to convert this element into a jQuery object, because jQuery has been loaded before AngularJS is loaded.

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

Ng-repeat animation
Ng-repeat is a very important command in the commands you can choose to use. There are also two basic operation commands: filtering and sorting. Add, move, or remove commands based on the executed operations.
The following shows how to use some basic animations. when the animation changes, you can see the corresponding animation effect.

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 instruction is used to add or remove the ng-hide style class of the target element. 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 modify the code as appropriate.

The following is an example of the animation code. the ng-hide command is used to implement the element fade-in and fade-out effect:

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

Run custom commands

To make custom commands produce animation effects, we need to use the $ animate service. Although the $ animate service is part of the core AngularJS framework, you also need to load ngAnimate to maximize the role of this service.

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

When the conversion animation starts, we will add a CSS class tag. when it ends, we will remove this class tag. The following is the sample code for this command:

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 execute this action at the end of the animation. In the browser's developer tools, we will find that the switching-active and switching-add class tags are being quickly added and subsequently removed when viewing the instruction elements. You can view the animation effect by defining a CSS conversion style or a custom JavaScript animation. The following is a simple CSS conversion style that can be used for the commands mentioned above. for simplicity, we have removed the specific prefix:

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

Or, there is an animation written in jQuery that can be used for the same command:

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 built-in commands, it can also be applied to custom commands:

You can see the effects of all the above animations on the example page.

Conclusion

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

However, using too many animations will make the application slow, and for users, this will make the application look I is not human. Therefore, you must be careful and optimize the use of this tool.