Angular Page Sliding

<!DOCTYPE html>
<html data-ng-app="demo" ng-controller="PageChangingController">

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <!-- binds the variable style on the angularjs $rootScope to this style tag -->
    <style ng-controller="PageTransitionCtrl" ng-bind-html-unsafe="page.transitionAnimationStyle"></style>
  </head>

  <body>
    <div class="header">
      <h1>Hello Angular Page Animations!</h1>
    </div>
    <div data-ng-view="" ng-animate="{enter: 'page-transition-enter', leave: 'page-transition-leave'}"></div>
    <div class="footer">
      <h3>Footer</h3>
    </div>
  </body>
</html>

var app = angular.module('demo', []);

app.config(function ($routeProvider) {
  $routeProvider
  .when('/one', {
    templateUrl:'page1.html',
    controller: 'Page1Ctrl'
  })
  .when('/two', {
    templateUrl:'page2.html',
    controller: 'Page2Ctrl'
  })
  .otherwise({
    redirectTo:'/one'
  });
});

/**
 * PageTransitionCtrl
 * Binds the transitionAnimation Styles to the current transition animation set. This is maintained by the ApplicationFctry.pages.transitionAnimation
 */
app.controller('PageTransitionCtrl', function($scope, ApplicationFctry) {  
  $scope.page = ApplicationFctry.getApplicationInfo().page;
});

/**
 * ApplicationFctry
 * Manages the the state of the Application.
 */
app.factory('ApplicationFctry', function($location) {  
	var pageTransitionAnimationStyles = {
    forward: '.page-transition-enter{ margin-left:0;} .page-transition-enter-active{ margin-left:0;}  .page-transition-leave{ margin-left:0; } .page-transition-leave-active{ margin-left:-100%; }', 
    backward: '.page-transition-enter{ margin-left:-100%; } .page-transition-enter-active{ margin-left:0; }  .page-transition-leave{ margin-left:0; } .page-transition-leave-active{ margin-left:100%; }',
  };
  
  var applicationInfo = {
    page: {
      transitionAnimation: 'forward',
      transitionAnimationStyle: pageTransitionAnimationStyles['forward']
    }
	};
  
  return {
    getApplicationInfo: function(){
      return applicationInfo;
    },
    
    getPageTransitionAnimation: function(){
      return applicationInfo.page.transitionAnimation;
    },
    
    setPageTransitionAnimation: function(animStyle){      
        applicationInfo.page.transitionAnimation = animStyle;
        if(pageTransitionAnimationStyles[animStyle]){
          applicationInfo.page.transitionAnimationStyle = pageTransitionAnimationStyles[animStyle];
        }
    },
    
		go: function(path) {
      $location.path(path);
    },
   
    goForward: function(path) {
      this.setPageTransitionAnimation('forward');  
      this.go(path);
    },
    
    goBackward: function(path) {
      this.setPageTransitionAnimation('backward');
      this.go(path);
    }
	};
});

/**
 * page-transition-enter Animation
 * This allows us to support left and right animating navigation,
 * by prepending the new page in the view when we are going backwards.
 */
app.animation('page-transition-enter', function(ApplicationFctry) {
  return {
    setup : function(element) {
      if(ApplicationFctry.getPageTransitionAnimation() === 'backward'){
        var elem = $(element);
        //Move the element to the beginning of the parent container
        elem.parent().prepend(elem.remove());
      }
    }
  }
});

/**
 * PageChangingController
 * This controller is added to the dom at the top of the application scope to give 
 * all controllers access to the goForward and goBackward scope methods
 */
app.controller('PageChangingController', function($scope, ApplicationFctry) {
  $scope.goForward = function(path) {
    ApplicationFctry.goForward(path);
  };
  $scope.goBackward = function(path) {
    ApplicationFctry.goBackward(path);
  };  
});

/**
 * Page1Ctrl
 * Page 1's controller
 */
app.controller('Page1Ctrl', function($scope, ApplicationFctry) {    
  $scope.name = "Page 1";
});

/**
 * Page2Ctrl
 * Page 2's controller
 */
app.controller('Page2Ctrl', function($scope, ApplicationFctry) {    
  $scope.name = "Page 2";
});

[ng-view],
[data-ng-view]{  
  position: relative;
  display: block;
  white-space: nowrap;
  transition: 5s cubic-bezier(0.680, -0.550, 0.265, 1.550) height;
}
[ng-view] > *, 
[data-ng-view] > *{
  -webkit-transition: 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550) all;
  -moz-transition: 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550) all;
  -ms-transition: 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550) all;
  -o-transition: 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550) all;
  transition: 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550) all;
  vertical-align: top;
  display: inline-block;
}
.page {
    width:100%;    
    padding:20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
.page1 {
  height: 250px;
  background-color: red;
}
.page2 {
  height: 200px;
  background-color: blue;
}

.header{  
  border-bottom: green 1px dashed;
  margin-bottom: 10px;
}
.footer{  
  border-top: green 1px dashed;
  margin-top: 10px;
}

<div class="page page1">
  <p>This is {{ name }}</p>
  <button  ng-click="goForward('/two')">go page 2</button>
</div>

<div class="page page2">
  <p>This is {{ name }}</p>
  <button  ng-click="goBackward('/one')">go page 1</button>
</div>