Implement JavaScript animation effects in AngularJS applications
AngularJS is a rich set of frameworks for creating single-page web applications, bringing all the required functions to building rich and interactive applications. One of the main features is that Angular brings support for animation.
We can use animations in some of the content of the application to show that some changes are happening. In my last article, I talked about the support for CSS animations in Angular applications. In this article, we will see how to use JavaScript scripts to generate animation effects in AngularJS applications.
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 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.
Syntax for custom 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 some key points to remember when writing JavaScript animations in AngularJS:
1. The name of the animation begins with a dot (.)
2. 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:
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 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.
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 demonstrates the use of some basic animations, and 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 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:
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 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 required to be loaded before this service can play its greatest role.
Using 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:
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's developer tools, when we look at the directive elements, we will find that the two class tags, switching-active and switching-add, 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:
.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(); } } }});In these animations, if it can be applied to built-in instructions, it can also be applied to custom instructions:
<div course-details >/div>
You can see the effects of all the above animations running on the example page.
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.