Adding Page Slide Animation to Angular App

I wanted to add some pizzazz to an Angular application I am working on.  So, I wanted to add an animation to page load event.  I am using Angular 1.2 +, and the way animations work changed in that version.  So, if you are on pre 1.2 version, this post really does not apply.  It took a bit of time to get the process right, so I wanted to describe the steps.  First let me state the goal of this change.  I want to have my pages (Angular views) slide in from right to left when they are loaded.

First of all, I need to load animations module for Angular.  This is a two step process.  I need to include ngAnimate module in my app Angular module:


Secondly, I need to include angular-animate.js in my scripts.  Since I am using ASP.NET MVC bundling, I need to add it to my bundle. 

            bundles.Add(new ScriptBundle("~/bundles/thirdparty").Include(

Now I am setup.  Next, I need to decide how to implement the animation.  I decide just to use CSS animations with transitions.  Since I want to have slide from right to left animation along with fading in/out, here is my CSS file.  I keep it in a separate file purely for management purposes., {
    -webkit-transition: 0.4s linear all;
    -moz-transition: 0.4s linear all;
    -o-transition: 0.4s linear all;
    transition: 0.4s linear all;
    position: absolute;
    left: 0;
    width: 100%;
} {
    z-index: 1000;
    left: 480px;
    opacity: 0;
} {
        left: 0;
        opacity: 1;
    } {
    z-index: 1001;
    left: 0;
    opacity: 1;
} {
        left: -480px;
        opacity: 0;

If you look at this CSS, you will see that I am animating main-content class

            <div class="col-xs-12 main-content" data-ng-view="" ng-cloak="">


I decorate the same div I am using for ng-view directive with this main-content class.  In other words, I am linking my animations to my ngView (or main application content area) where my partial views for routes are loaded.  On ng-enter and ng-leave I am starting transition that lasts for 0.4 seconds and is linear, meaning that animated values are incremented or decremented linearly in time.  I am starting with left being zero and I am setting width to 100% within the parent.  ng-enter CSS class is injected when view is being inserted into target div (ng-view directive decorated div).  When view is done rendering, ng-enter-active is injected.  The same process occurs when view is removed – start with ng-leave class, end with ng-leave-active class.  If you look at where I start with ng-enter, you will see that I start with transparent content and left offset of 480 pixels and I end with fully opaque content and zero offset.  In other words, I animate from left to right while slowing fading in.  I am reversing the process on exit, animating from 0 to –480 while fading out.  Note that I am using container-fluid class for my outer content, not container.  If I were to use container class, my zero pixels left offset would have looked weird.

This was the last step.  Now as I navigate between pages, my views slide in.  You can download the sample project here.



Leave a Reply

Your email address will not be published. Required fields are marked *