Introduction
In my previous article I told you How to Add Animation to Your Application Using AngularJS.
This article explains how to enter and leave Animation in AngularJS.
In this article I 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 in it.
Step 1
First you need to pass the reference of two external Angular files or you can also download them and then can add them directly to 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 to 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 said earlier if you want to animate then you need to add the angular.module, I had first added it, this angular.module contains a variable named "animate". This is the variable that will bind using the ng-app, after this I had passed the ngAnimate.
The controller name is "animateCtrl". In this controller function I had passed some initial values using the $scope.
After this a function is created named "insert" function, this function will help to insert a new value in the already existing data on the click of a button, for this to happen I have used push().
One more function is created that is named "remove" function, this function will help to remove the data on the click of a button, for this to happen I have 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 used 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() funciton 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: 1s;
margin-left: 100%;
}
.ng-enter-active
{
margin-left: 0;
}
.ng-leave
{
-webkit-transition: 1s;
transition: 1s;
margin-left: 0;
}
.ng-leave-active
{
margin-left: 100%;
}
</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 have created two classes for each enter and leave, the second class of both enter and leave will work when they are in active mode.
Now our application is completed and is ready for execution.
Output
On running the application you will get output like this:
![enter and leave animation]()
First only two values will be shown, but as you click on "Enter Animation", an animation like this will be shown:
![enter and leave animation]()
But as you will click on the leave button, the data will leave as in this animation:
![enter and leave animation]()
The complete code of this application is as follows:
<html ng-app="animate" xmlns="http://www.w3.org/1999/xhtml">
<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>
<style>
.ng-enter
{
-webkit-transition: 1s;
transition: 1s;
margin-left: 100%;
}
.ng-enter-active
{
margin-left: 0;
}
.ng-leave
{
-webkit-transition: 1s;
transition: 1s;
margin-left: 0;
}
.ng-leave-active
{
margin-left: 100%;
}
</style>
<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>
</head>
<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>
</html>