Angular 1.2.1 App with routes, async templates, ng-view and css3 slide animation V2

<!DOCTYPE html>
<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" data-semver="1.9.1" data-require="jquery@*"></script>
  <script data-require="bootstrap@3.0.0" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <link data-require="bootstrap@3.0.0" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
  <link data-require="font-awesome@4.0.3" data-semver="4.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
  <link href="style.css" rel="stylesheet" />

  <script src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1" data-require="angular@1.2.1"></script>
  <script src="http://code.angularjs.org/1.2.1/angular-route.js" data-semver="1.2.1" data-require="angular-route@1.2.0"></script>
  <script src="http://code.angularjs.org/1.2.0/angular-animate.js" data-semver="1.2.0" data-require="angular-animate@1.2.0"></script>
  <script src="http://code.angularjs.org/1.2.1/angular-sanitize.js" data-semver="1.2.1" data-require="angular-sanitize@1.2.0"></script>

  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <ul class="nav nav-pills">
    <li ng-class="{active: matchesRoute('/home', '')}">
      <a href="#/home" class="btn" style="font-size: 14px">
        <i class="fa fa-home"></i> Home</a>
    </li>
    <li ng-class="{active: matchesRoute('/bellsAndWhistles')}">
      <a href="#/bellsAndWhistles"><i class="fa fa-bell"></i> BellsAndWhistles</a>
    </li>
    <li ng-class="{active: matchesRoute('/about')}">
      <a href="#/about"><i class="fa fa-info"></i> About</a>
    </li>
  </ul>
  <div class="view-animate-container">
    <div class="well wslide" ng-view>
      <!-- view container. Asynchronously loaded view templates are placed here -->
    </div>
  </div>
  <div class="well green">
    <p>This content, will <b>not</b> be jumpy.</p>
    <p>We also have content below the horizon line, if the content is outside the view-animate-container div</p>
  </div>
  <div>
    <p>And, this content, will flow below the preceding content.</p>
  </div>
</body>

</html>

// Code goes here

angular.module('myApp', ['ngRoute', 'ngAnimate'])
.run(function($rootScope, $location){
  $rootScope.matchesRoute = function() {
    for(var i=0; i<arguments.length; i++) {
      if($location.path() === arguments[i]) {
        return true;
      }
    }
    return false;
  }
})
.config(function($routeProvider) {
    $routeProvider
      .when('/bellsAndWhistles', {templateUrl: 'bellsAndWhistles.html', controller: angular.noop()})
      .when('/about',            {templateUrl: 'about.html',            controller: angular.noop()})
      .otherwise({redirectTo: '', templateUrl: 'home.html'});
});

html, body{
  height: 100%;
}

.view-animate-container {
    position: relative;
    overflow: hidden;
    height:auto;
}

.view-animate-container > .slide.ng-enter,
.view-animate-container > .slide.ng-leave {
    -webkit-transition: all ease 0.5s;
       -moz-transition: all ease 0.5s;
         -o-transition: all ease 0.5s;
            transition: all ease 0.5s;  
    width: 100%;
    position:relative;
}

  .view-animate-container > .wslide.ng-enter {
   -webkit-animation-name: slideIn;
   animation-name: slideIn;
   
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation: slideIn .5s;
   animation: slideIn .5s;
}  


 .view-animate-container > .wslide.ng-leave {
   -webkit-animation-name: slideOut;
   animation-name: slideOut;
   
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   -webkit-animation: slideOut .5s;
   animation: slideOut .5s;
} 

@keyframes slideOut {
    from {
        opacity: 1;
        max-height: 500px;
    }
        50% {
        opacity: 0;
        max-height: 0px;
        margin-top:0;
        min-height:0;
        margin-bottom:0;
        padding-bottom: 0;
        padding-top: 0;
    }

    to {
        opacity: 0;
        max-height: 0px;
        margin-top:0;
        min-height:0;
        margin-bottom:0;
        padding-bottom: 0;
        padding-top: 0;
    }
}

@keyframes slideIn {
  from {
    opacity: 0;
        max-height: 0px;
    margin-top:0;
    min-height:0;
    margin-bottom:0;
    padding-bottom: 0;
    padding-top: 0;
  }
    50% {
           max-height: 0;
           opacity: 0;
           
    margin-top:0;
    min-height:0;
    margin-bottom:0;
    padding-bottom: 0;
    padding-top: 0;
    }
  to {
        max-height: 500px;
        opacity: 1;
  }
}

.green {
  background-color:rgba(5,255,5,.25);
}

This is a little testapp build with angularjs 1.2.0, angular-route and angular-animate. bootstrap was used for styling.

<div>
  <h3>Catfood here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Phasellus ut ex egestas, rutrum dolor vel, malesuada augue. 
Phasellus egestas fringilla tortor, non imperdiet quam venenatis ac. 
Sed arcu diam, ullamcorper ut eros vitae, aliquam euismod tortor. 
Praesent id metus a dolor tempus dapibus quis volutpat dolor. 
</p>
<p>Etiam ac tellus tincidunt, ullamcorper lorem ut, elementum orci. Maecenas 
sed sapien nisl. Duis tempus metus mollis consectetur cursus. Nunc eleifend 
elit nec felis dapibus sagittis. Duis sem ligula, commodo pellentesque 
viverra sed, semper sed magna. Ut a sapien libero. Phasellus justo purus, 
blandit quis facilisis id, ornare ac magna. Aenean sapien metus, mattis at eros 
id, euismod facilisis augue.
</p>
</div>

<h3>about</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Phasellus ut ex egestas, rutrum dolor vel, malesuada augue. 
Phasellus egestas fringilla tortor, non imperdiet quam venenatis ac. 
Sed arcu diam, ullamcorper ut eros vitae, aliquam euismod tortor. 
Praesent id metus a dolor tempus dapibus quis volutpat dolor. 
</p>
<p>Cras sed nunc et elit lacinia bibendum in nec nunc. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Ut interdum placerat dapibus. 
</p>

<h1>Angular 1.2.0 App with routes, async templates, ng-view and css3 slide animation <b class="green">V2</b></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Phasellus ut ex egestas, rutrum dolor vel, malesuada augue. 
Phasellus egestas fringilla tortor, non imperdiet quam venenatis ac. 
Sed arcu diam, ullamcorper ut eros vitae, aliquam euismod tortor. 
Praesent id metus a dolor tempus dapibus quis volutpat dolor. 
</p>
<p>Cras sed nunc et elit lacinia bibendum in nec nunc. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Ut interdum placerat dapibus. 
</p>
<p>Etiam ac tellus tincidunt, ullamcorper lorem ut, elementum orci. Maecenas 
sed sapien nisl. Duis tempus metus mollis consectetur cursus. Nunc eleifend 
elit nec felis dapibus sagittis. Duis sem ligula, commodo pellentesque 
viverra sed, semper sed magna. Ut a sapien libero. Phasellus justo purus, 
blandit quis facilisis id, ornare ac magna. Aenean sapien metus, mattis at eros 
id, euismod facilisis augue.
</p>