AngularJS 1.2.x

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.10/angular.js" data-semver="1.2.10"></script>
    <script data-require="angular-animate@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular-animate.js"></script>
    <script data-require="angular-route@1.2.10" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
    <style>
    .view-container{
      position: relative;
      border-top:15px solid blue;
    }
    .view{
      width: 100%;
      box-sizing: border-box;
      padding: 1em;
      background: #eee;
    }
    .view.ng-enter, .view.ng-leave{
      position: absolute;
      -webkit-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
    }
    .view.ng-enter{
      transform: translate3d(100%, 0, 0);
      -webkit-transform: translate3d(100%, 0, 0);
    }
    .view.ng-enter-active{
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
    }
    .view.ng-leave{
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
    }
    .view.ng-leave-active{
      transform: translate3d(-100%, 0, 0);
      -webkit-transform: translate3d(-100%, 0, 0);
    }
    </style>
  </head>

  <body>
    <nav>
      <a href="#/view1">View1</a>
      <a href="#/view2">View2</a>
    </nav>
    <div class="view-container">
      <div class="view" ng-view=""></div>
    </div>
    <script>
      angular
        .module('app', ['ngAnimate','ngRoute'])
        .config(function($routeProvider){
          $routeProvider
            .when("/view1", {
              template: '<div>View1</div>'
            })
            .when("/view2", {
              template: '<div>View2</div>'
            })
            .otherwise({redirectTo:"/view1"});
        });
    </script>
  </body>

</html>