Apply angularjs animation in 2 minutes

Angularjs animation is more than easy, even you don't have write a single line of code any kind of animation. In this demo I am going to show how you can animate the list of item coming from left, rotating and flying list items by just adding ngAnimation dependency and some copy and past of css and adding class to elements. Don't you bleave it, watch the video.

• First of all, The ng-animate attribute is deprecated in 1.2, so it will not work any more, in place of ng-animate ="'animate'" we need to use the class="animate".

• Add ngAnimate dependency in you app module say angular.module('MyApp', ['ngAnimate'])

• Add angular-animate.min.js file to your index page

That's it now where every you want to put the animation just add the class animate which we will create in a moment.

I am not going to write the CSS because it is already created by experts for us, go to angularjs site and copy the css after adjusting timing, rotation style and other effects http://www.nganimate.org/angularjs/ng-repeat/move, check different styles and select whatever you like most. Let me copy one for demo, let's try 3D Rotate

.animate-enter, 
.animate-leave { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 

.animate-leave.animate-leave-active,
.animate-enter {
    -webkit-transform: rotateX(90deg) rotateZ(90deg);
    -moz-transform: rotateX(90deg) rotateZ(90deg);
    -ms-transform: rotateX(90deg) rotateZ(90deg);
    -o-transform: rotateX(90deg) rotateZ(90deg);
    transform: rotateX(90deg) rotateZ(90deg);
    opacity: 0;
    height: 0px;
}        

.animate-enter.animate-enter-active,
.animate-leave {
    -webkit-transform: rotateX(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateZ(0deg);
    -ms-transform: rotateX(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateZ(0deg);
    opacity: 1;
    height: 30px;
}

This CSS will not work, very bad, so make it working we need to do some adjustments, because angularjs animation works on totally on CSS3 with specific classes those are .ng-leave, .ng-enter, .ng-enter-active and .ng-leave-active that's it, so if you can note there is not such class in above CSS which we copied so follow the following steps to convert them in these classes.

Steps for adjustments

1. Rename first class ".animate-enter, .animate-leave" To ".animate"
2. Remove the last line "display: block;" because we have to use it as class so it will change our page layout
3. Now replace all the ".animate-" to ".ng-"
4. Now put the ".animate." before every class except the first one ".animate"

Now it will become

.animate { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
} 

.animate.ng-leave.ng-leave-active,
.animate.ng-enter {
    -webkit-transform: rotateX(90deg) rotateZ(90deg);
    -moz-transform: rotateX(90deg) rotateZ(90deg);
    -ms-transform: rotateX(90deg) rotateZ(90deg);
    -o-transform: rotateX(90deg) rotateZ(90deg);
    transform: rotateX(90deg) rotateZ(90deg);
    opacity: 0;
    height: 0px;
}        

.animate.ng-enter.ng-enter-active,
.animate.ng-leave {
    -webkit-transform: rotateX(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateZ(0deg);
    -ms-transform: rotateX(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateZ(0deg);
    opacity: 1;
    height: 30px;
}

Let's place "animate" class to a ng-repeat element to check it.

<tr class="animate" ng-repeat="person in peoples | filter: searchText | orderBy:sortBy:sortDescending ">
    <td ng-bind="person.name"></td>
    <td ng-bind="person.gendar"></td>
    <td ng-bind="person.age"></td>
    <td ng-bind="person.salary | currency"></td>
</tr>

Great, it is working as it should be, enjoy animation.

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 20,837

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 57,508

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 19,499

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 4,471

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 31,236