We have already learned that how to apply animation using specified directives of AngularJS. AngularJS also provide the facility to apply animation to custom directives.
Now, we are going to learned that how to apply animation in our own directives. We will do this by using the methods of $animate service of AngularJS.
$animate Service
$animate service belongs to the ngAnimate module of AngularJS. And to use ngAnimate you have to include angular-animate.js file in your page.
To use $animate service, we need to inject $animate services in our own directive after injecting this, we can use its method to apply animation in our directives on a particular event.
Syntax Of Using $animate Service
// Creating a module also injecting ngAnimate module in it
var myApp1 = angular.module("MyApp", ["ngAnimate"]);
// Using module creating directive also injecting $animate service
myApp1.directive('dirName', function ($animate) {
return{
// Methods of $animate used here
};
});Explanation: First, we create a module with injecting ngAnimate module in it. Then we create directive using the module which implements $animate service in it.
Methods of $animate
There are various methods of $animate to apply animation on the custom directive in different events some of them are:
- enter(element, parent, callback): This method appends the element object with the parent element and then run the animation on the element.
- leave(element, callback): This method applies the animation on the element and removes the element.
- move(element, parent, [after], callback): This method moves the element after the after node or just before the parent node and runs the animation.
- addClass(element, className, callback): This method applies animation according to the class name and then add the class to the element.
- removeClass(element, className, callback): This method applies the animation and then remove the class from the element.
Note: In the above function callback contains the stylesheet that can be applied to the element. This is an optional parameter, we can also use an external stylesheet in which we have defined all CSS classes which we are using here.
Creating An Application
Here we are going to create an application in which we will create our own directives and we will also apply animation on it. We will do this by using methods of $animate service.
Creating module and directive
JavaScript File : app.js
// This will create a module name MyApp injecting ngAnimate module
var myApp1 = angular.module("MyApp", ["ngAnimate"]);Explanation : Here we are creating a module name MyApp after injecting ngAnimate in it.
JavaScript File : directive.js
// Here creating directive also injecting $animate service in it
myApp1.directive('dirName', function ($animate) {
return{
// This is used to restrict directive use as an attribute
restrict: "A",
scope: {},
link: function (scope, element) {
var currentStep = 0;
var maxStep = 3;
var x = 1;
// This function will get called after clicking on a element
element.on('click', function () {
if (x % 2 == 0) // THis code is used to call different function on every click
{
var add = 'step-1';
$animate.addClass(element[0].children[0].children, add);
$animate.removeClass(element[0].children[0].children, 'step-0');
} else {
var add = 'step-0';
$animate.addClass(element[0].children[0].children, add);
$animate.removeClass(element[0].children[0].children, 'step-1');
}
x = x + 1;
});
}
};
});Explanation : Here we are creating a directive named dirName in which we have injected $animate service.
Creating HTML File:
HTML File: index.html
<html ng-app="MyApp">
<head>
<title>Animation $animate Animation</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular-animate.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/transitions.css" />
<script type="text/javascript" src="js/directive.js"></script>
</head>
<body>
<table>
<!--<tr> which will create first animation on the demo-->
<tr dir-name><td align="center">
<div class="my-slide-animation">
<b>Welcome</b>
</div></td>
<td><button type="button" >Animate It</button></td>
</tr>
</table>
</body>
</html>Explanation: In above mentioned code we have included a module named MyApp. We have also used dir-name directive to create animation.
Creating CSS File:
CSS File: transitions.css
/* Css for first animation appied on first <tr> */
.my-slide-animation {
width: 100px;
height:100px;
background:#eee;
// -webkit-transition:0.5s linear all;
transition:0.5s linear all;
}.my-slide-animation.step-0 {
-webkit-transform:scale(1,1);
transform:scale(1,1);
background:#FEFFED;
}.my-slide-animation.step-1 {
-webkit-transform:scale(2,1);
transform:scale(2,1);
background:#ECC689;
}Explanation: This css file is used to apply animation effect on the html page.
Note: Here in above code we have implemented some method of $animate. And there are various other method which can also be used to get animation on different different events.
Tips: We have include a zip file of complete code with this blog.To be more clear about Animation using $animate service in AngularJS. Just dowload it and use it.
Conclusion
At this point, I am pretty sure that you know how to apply animation in custom directive using $animate service in angular. For any query, let us know. Stay in touch with us for more technical tricks :).
