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:

    angular.module("app",
        [
            "ngRoute",
            "ngAnimate",

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(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/angular.min.js",
                        "~/Scripts/angular-route.min.js",
                        "~/Scripts/angular-animate.min.js",
                        "~/Scripts/bootstrap.min.js"));

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.

.main-content.ng-enter, .main-content.ng-leave {
    -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%;
}

.main-content.ng-enter {
    z-index: 1000;
    left: 480px;
    opacity: 0;
}

    .main-content.ng-enter.ng-enter-active {
        left: 0;
        opacity: 1;
    }

.main-content.ng-leave {
    z-index: 1001;
    left: 0;
    opacity: 1;
}

    .main-content.ng-leave.ng-leave-active {
        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="">
                @RenderBody()
            </div>

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.

Enjoy.