Tutorial 12: AngularJS Animation | ngAnimate AngularJS

In AngularJS by Administrator18 Comments

For this tutorial, I am going to write about angularjs animation, for this we need to continue working on the example from previous tutorial. You can download required files here.

The $animate service allows you to provide transition effects when elements are added, removed, or moved in the DOM. The $animate service doesn’t define any animations itself but relies on the CSS3 animation and transition features. The $animation service is defined within an optional module called ngAnimate that must be downloaded into the angularjs project folder. Go to http://angularjs.org, click Download or download directly here.

First

You need to include, angularJS animate module in your root file i.e index.html like this:

This is how we include extra modules.

Second

Goto controllers.js file and REPLACE first line with this:

added ngAnimate dependency here in module. Rest of the line is same.

Third

Where you want animation to appear? In my case I want it in list.html which holds guitars list. So lets goto li tag (which shows us list) in list.html and add the following ng-Animate directive. You need to goto end of file and just before the closing div replace the entire ul with this thing (don’t replace the search part):

you see all the code is the same but li has a new directive called ng-Animate=”‘Animate'” that tells angularJS to animate this piece of code when anything enter, leave or move.

Fourth

Now is the tricky part, we added ng-animate in li which has a class of itemHolder. so we need to go to styles.css and add and replace some transition style to itemHolder class and its hover state, like this:

if you want you can also put fade in/out effect to page switching. To do this, we know that our partials (list.html and details.html) are loading in index.html file inside a div with class ‘main’. So, let just add transition effect to main class in styles.css like this:

 Fifth

Last thing, we need to add angularJS specific csss3 classes in styles.css to deal with enter, leave or movement of data. Lets just add these styles at the end of styles.css like this:

you probably looking for ng-enter or other above mentioned classes in html file but you wont find it. Reason is, this is generated by angularJS on that ng-Animate directive that we placed in list.html whose dependency is in controllers.js. ng-enter means when data is entered its opacity must be zero and height equals zero, same applies to leave and hide. In next class style, it says when data has been loaded its opacity must be 1, same applies to leave active.

DEMO  < I’m a link

Try searching, sorting and clicking guitars  

Video Tutorial

Download Project files

Hope you like it. Please share my work.

Previous-Chapter-Buttonnext-AngularJS MVC

//

  • Shahzad Ashraf

    thats nice…jzakallah………………
    what is next tutorial title and when will come….??

    • Shahzad Ashraf

      i ask about next title so that i can study about it from net and gain more and more learning

    • Hafiz Faraz Mukhtar

      Thanks.. next tutorial will be posted after few days..as I have to start another project.

      • Shahzad Ashraf

        is this app completed..??can u tell the next tutorail content??

  • Stela Ivy

    Wow that’s a cool app. thanxx mate.

    • Hafiz Faraz Mukhtar

      Thanks

  • Shahzad Ashraf

    is this app completed..??can u tell the next tutorail content??

    • Hafiz Faraz Mukhtar

      thr are alot of things remaining… next tutorial will be on TABS

  • MawashiKid

    niiiiiiiice, sweet and simple though pretty effective…I like that

    • Hafiz Faraz Mukhtar

      thanks

  • Shahzad Ashraf

    when to move on CRUD operation???

    • Hafiz Faraz Mukhtar

      after few tutorials like 2 3

  • Shahzad Ashraf

    when wil next tutorial come?? anxiously waiting??

    • Hafiz Faraz Mukhtar

      today

      • Shahzad Ashraf

        it’s nice to hear .

  • pankaj

    awsome tutorials 🙂 thank u so much for these tutorails

  • zafar

    HI HFARAZM you are doing a nice job… keep it up. i want to know one thing. can you please explain me. when i add the nganimate effect on my application that time my json data destroyed Why?

  • zafar

    my issue has been resolved Thank you