AngularJS 1.2.x view animations for mobile

var app = angular.module('plunker', [
  'ngRoute',
  'ngAnimate'
]);

app.run(function($rootScope, $window) {
  // publish current transition direction on rootScope
  $rootScope.direction = 'ltr';
  // listen change start events
  $rootScope.$on('$routeChangeStart', function(event, next, current) {
    $rootScope.direction = 'rtl';
   // console.log(arguments);
    if (current && next && (current.depth > next.depth)) {
      $rootScope.direction = 'ltr';  
    }
    // back
    $rootScope.back = function() {
      $window.history.back();
    }
  });
});

app.controller('MainCtrl', function($scope) {
 
});

app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'home.html',
    depth:1
  }).when('/products', {
    templateUrl: 'products.html',
    depth:2
  }).when('/products/category', {
    templateUrl: 'category.html',
    depth:3
  })
});

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

  <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.3/angular.js" data-semver="1.2.4"></script>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.3/angular-route.js" data-semver="1.2.4"></script>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.3/angular-animate.js" data-semver="1.2.4"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <div class="view-animate-container" ng-class="direction">
      <div ng-view class="view-animate"></div>
    </div>
    
    <script type="text/ng-template" id="home.html">
      <h3>Page 1</h3>
     <a href="#/products">Page 2</a>
     <a href="#/products/category">Page 3</a>
    </script>
    
    <script type="text/ng-template" id="products.html">
      <h3>Page 2</h3>
      <button ng-click="back()">Back</button>
      <a href="#/products/category">Page 3</a>
    </script>
    
    <script type="text/ng-template" id="category.html">
      <h3>Page 2 / SubPage</h3>
      <button ng-click="back()">Back</button>
      <a href="#/products">Page 2</a>
    </script>
  </body>

</html>

/* Put your css in here */


body, html {
width:100%;
height:100%;
overflow: hidden;
padding:0;
margin:0;
}

.view-animate-container {
  position:relative;
  height:100%;
  background:#eee;
  border:1px solid black;
  overflow:hidden;
}
 
.view-animate {
  padding:10px;
}
 
.view-animate.ng-enter, .view-animate.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
 
  display:block;
  width:100%;
  border-left:1px solid black;
 
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:10px;
}
 
.rtl .view-animate.ng-enter {
  -webkit-transform: translate3d(100%, 0, 0);
}
.rtl .view-animate.ng-enter.ng-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
}
.rtl .view-animate.ng-leave.ng-leave-active {
  -webkit-transform: translate3d(-100%, 0, 0);
}

.ltr .view-animate.ng-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
}
.ltr .view-animate.ng-enter.ng-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
}
.ltr .view-animate.ng-leave.ng-leave-active {
  -webkit-transform: translate3d(100%, 0, 0);
}