Introduction
In my previous articles I told you about:
This article explains how to add Fade In and Fade Out Animation to your application using AngularJS.
In this article I will use AngularJS 1.2.2, if you are using 1.2.11 then you need to first add 1.2.2 and remove 1.2.11 from your application otherwise Animation will not be supported.
CSS Animation will be used to help Angular Application Animate.
The ng-animate directive is not supported in AngularJS 1,2 Version, instead we need to add "Angular.Module" and then "ngAnimate" will be added to it.
Step 1
First you need to pass the reference of two external Angular files or you can also download them and then add them directly in the head section, these files are:
- angular.js 1.2.2
- angular-animate.min.js
You can pass the reference of these files in this format:
<head runat="server">
<title></title>
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.2/angular-animate.min.js"></script>
</head>
Step 2
After adding these external files you need to work on the JavaScript of this application, add this code in the head section:
<script>
angular.module('animate', ['ngAnimate'])
.controller('animateCtrl', function (
$scope
) {
$scope.names = [{
name: 'Mohit'
}, {
name: 'Anubhav'
}];
$scope.insert = function () {
$scope.names.push({
name: 'Anubhav'
});
};
$scope.remove = function () {
$scope.names.pop();
};
});
</script>
As I told you earlier, if you want to animate then you need to add the angular.module, I first added it. This angular.module contains a variable named "animate"; this is the variable that will be bound using the ng-app, after this I passed the ngAnimate.
"animateCtrl" is the controller name. In this controller function I passed some initial values using $scope.
After this a function is created named insert, this function will help to insert a new value into the previously existing data on the click of the button, for this to happen I used push().
One more function is created named remove, this function will help to remove the data on the click of a button, for this to happen I used pop().
Step 3
Until now our work on the View is completed and now we need to work on the View Model of this application.
Write this code in the body section of your application:
<body ng-controller="animateCtrl">
<div>
<button ng-click="insert()">Enter Animation</button>
<button ng-click="remove()">Leave Animation</button>
<ul>
<li ng-repeat="user in names">
<a>{{user.name}}</a>
</li>
</ul>
</div>
</body>
Here I had bound the body with the ng-controller, I took a Div in which two buttons are used.
You can see that the first button click is bound to the insert() function using ng-click and the second button is bound to the remove() function using ng-click.
After the buttons I created a dynamic list, this list is dynamic because I am using the ng-repeat directive in this list, this will repeat the functionality for each new data so a new row will be added for each new data.
Step 4
Now we need to add some CSS to this application.
<style>
.ng-enter
{
-webkit-transition: 1s;
transition: 3s;
opacity:0;
}
.ng-enter-active
{
opacity:1;
}
.ng-leave
{
-webkit-transition: 1s;
transition: 2s;
}
.ng-leave-active
{
opacity:0;
}
</style>
As the Angular.Module was necessary in the JavaScript Section similarly "-webkit-transition" is necessary in the CSS section, if transition is removed then our animation will stop working.
Here I created two classes for each enter and leave, the second class of both the enter and leave will work when they are in the active mode.
In the ng-enter class the opacity is set to 0 which means that initially the data will not be seen, since the user will click on the first button the ng-enter-active class will be activated and its opacity will be changed to 1, in other words that data will start showing but with a delay of 3s.
Similarly in the ng-leave-active class the opacity is set to 0, in other words the click on the second button will hide the data but with a delay of 2s.
Now our application is completed and is ready for execution.
Output
On running the application you will get an output like this one:
![hide and show animation]()
You might be thinking that the opacity was 0 by default, so why are these two values appearing on running the application?
That's because these two values were the default value that were passed in the JavaScript function.
Now if I click on the Enter Animation then a new entry will be made and that's too with a animation affect.
![hide and show animation]()
Similarly if I click on the second button then last entry will be removed with an animation affect.