tgeorgiev/app.js

## app.js
var resolve = {
  delay: function($q, $timeout) {
    console.log("delay");
    var delay = $q.defer();
    $timeout(delay.resolve, 0, false);
    return delay.promise;
  }
};

angular.module('viewTransitionApp', ['ngRoute', 'ngAnimate'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/viewA', {
        templateUrl: 'viewA.html',
        resolve: resolve
      })
      .when('/viewA/:viewAB', {
        templateUrl: 'viewAB.html',
        resolve: resolve
      })
      .when('/viewA/:viewAB/:viewABC', {
        templateUrl: 'viewABC.html',
        resolve: resolve
      })
      .when('/viewA/:viewAB/:viewABC/:viewABCD', {
        templateUrl: 'viewABCD.html',
        resolve: resolve
      })
      .otherwise({
        redirectTo: '/viewA'
      });
  })
  .controller('MainCtrl', function ($scope) {
    var oldLocation = '';
    $scope.$on('$routeChangeStart', function(angularEvent, next) {
      console.log("routeChangeStart");
      var isDownwards = true;
      if (next && next.$$route) {
        var newLocation = next.$$route.originalPath;
        if (oldLocation !== newLocation && oldLocation.indexOf(newLocation) !== -1) {
          isDownwards = false;
        }

        oldLocation = newLocation;
      }

      $scope.isDownwards = isDownwards;
    });
  });

## index.html
<!doctype html>
  <head>
    <meta charset="utf-8">
    <title>ngView transition</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body ng-app="viewTransitionApp">

    <div ng-controller="MainCtrl">
      <div ng-view ng-class="{slide: true, left: isDownwards, right: !isDownwards}"></div>
    </div>

    <script type="text/ng-template" id="viewA.html">
      <div class="view view-A">
        <p>View A</p>

        <ul>
          <li><a href="#viewA/viewAB1">View AB.1</a></li>
          <li><a href="#viewA/viewAB2">View AB.2</a></li>
          <li><a href="#viewA/viewAB3">View AB.3</a></li>
        </ul>
      </div>
    </script>

    <script type="text/ng-template" id="viewAB.html">
      <div class="view view-AB">
        <p>View AB</p>

        <a href="#viewA">Go back</a>

        <ul>
          <li><a href="#viewA/viewAB1/viewABC1">View ABC.1</a></li>
          <li><a href="#viewA/viewAB1/viewABC2">View ABC.2</a></li>
          <li><a href="#viewA/viewAB1/viewABC3">View ABC.3</a></li>
          <li><a href="#viewA/viewAB1/viewABC4">View ABC.4</a></li>
          <li><a href="#viewA/viewAB1/viewABC5">View ABC.5</a></li>
        </ul>
      </div>
    </script>

    <script type="text/ng-template" id="viewABC.html">
      <div class="view view-ABC">
        <p>View ABC</p>

        <a href="#viewA/viewAB1">Go back</a>

        <ul>
          <li><a href="#viewA/viewAB1/viewABC1/viewABCD1">View ABCD.1</a></li>
          <li><a href="#viewA/viewAB1/viewABC1/viewABCD2">View ABCD.2</a></li>
        </ul>
      </div>
    </script>

    <script type="text/ng-template" id="viewABCD.html">
      <div class="view view-ABCD">
        <p>View ABCD</p>

        <a href="#viewA/viewAB1/viewABC1">Go back</a>

      </div>
    </script>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>

    <script src="app.js"></script>
  </body>
</html>

## main.css
.slide {
  position: relative;
}

.slide.ng-leave, .slide.ng-enter {
  -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -ms-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  left: 0;
  right: 0;
}

.slide.left.ng-enter,
.slide.right.ng-leave.ng-leave-active {
  left: 100%;
  opacity: 0;
}

.slide.left.ng-enter.ng-enter-active,
.slide.left.ng-leave,
.slide.right.ng-enter.ng-enter-active,
.slide.right.ng-leave {
  left:0;
  opacity: 1;
}

.slide.left.ng-leave.ng-leave-active,
.slide.right.ng-enter {
  left: -100%;
  opacity: 0;
}

.view {
  width: 500px;
  height: 300px;

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;

  padding: 10px;
}

.view-A {
  background-color: #CC71FF;
}

.view-AB {
  background-color: #328AE8;
}

.view-ABC {
  background-color: #44FF8A;
}

.view-ABCD {
  background-color: #E8E832;
}
	var resolve = {
	delay: function($q, $timeout) {
	console.log("delay");
	var delay = $q.defer();
	$timeout(delay.resolve, 0, false);
	return delay.promise;
	}
	};

	angular.module('viewTransitionApp', ['ngRoute', 'ngAnimate'])
	.config(function ($routeProvider) {
	$routeProvider
	.when('/viewA', {
	templateUrl: 'viewA.html',
	resolve: resolve
	})
	.when('/viewA/:viewAB', {
	templateUrl: 'viewAB.html',
	resolve: resolve
	})
	.when('/viewA/:viewAB/:viewABC', {
	templateUrl: 'viewABC.html',
	resolve: resolve
	})
	.when('/viewA/:viewAB/:viewABC/:viewABCD', {
	templateUrl: 'viewABCD.html',
	resolve: resolve
	})
	.otherwise({
	redirectTo: '/viewA'
	});
	})
	.controller('MainCtrl', function ($scope) {
	var oldLocation = '';
	$scope.$on('$routeChangeStart', function(angularEvent, next) {
	console.log("routeChangeStart");
	var isDownwards = true;
	if (next && next.$$route) {
	var newLocation = next.$$route.originalPath;
	if (oldLocation !== newLocation && oldLocation.indexOf(newLocation) !== -1) {
	isDownwards = false;
	}

	oldLocation = newLocation;
	}

	$scope.isDownwards = isDownwards;
	});
	});
	<!doctype html>
	<head>
	<meta charset="utf-8">
	<title>ngView transition</title>
	<link rel="stylesheet" href="main.css">
	</head>
	<body ng-app="viewTransitionApp">

	<div ng-controller="MainCtrl">
	<div ng-view ng-class="{slide: true, left: isDownwards, right: !isDownwards}"></div>
	</div>

	<script type="text/ng-template" id="viewA.html">
	<div class="view view-A">
	<p>View A</p>

	<ul>
	<li><a href="#viewA/viewAB1">View AB.1</a></li>
	<li><a href="#viewA/viewAB2">View AB.2</a></li>
	<li><a href="#viewA/viewAB3">View AB.3</a></li>
	</ul>
	</div>
	</script>

	<script type="text/ng-template" id="viewAB.html">
	<div class="view view-AB">
	<p>View AB</p>

	<a href="#viewA">Go back</a>

	<ul>
	<li><a href="#viewA/viewAB1/viewABC1">View ABC.1</a></li>
	<li><a href="#viewA/viewAB1/viewABC2">View ABC.2</a></li>
	<li><a href="#viewA/viewAB1/viewABC3">View ABC.3</a></li>
	<li><a href="#viewA/viewAB1/viewABC4">View ABC.4</a></li>
	<li><a href="#viewA/viewAB1/viewABC5">View ABC.5</a></li>
	</ul>
	</div>
	</script>

	<script type="text/ng-template" id="viewABC.html">
	<div class="view view-ABC">
	<p>View ABC</p>

	<a href="#viewA/viewAB1">Go back</a>

	<ul>
	<li><a href="#viewA/viewAB1/viewABC1/viewABCD1">View ABCD.1</a></li>
	<li><a href="#viewA/viewAB1/viewABC1/viewABCD2">View ABCD.2</a></li>
	</ul>
	</div>
	</script>

	<script type="text/ng-template" id="viewABCD.html">
	<div class="view view-ABCD">
	<p>View ABCD</p>

	<a href="#viewA/viewAB1/viewABC1">Go back</a>

	</div>
	</script>

	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>

	<script src="app.js"></script>
	</body>
	</html>
	.slide {
	position: relative;
	}

	.slide.ng-leave, .slide.ng-enter {
	-webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	-moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	-ms-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	-o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

	position:absolute;
	left: 0;
	right: 0;
	}

	.slide.left.ng-enter,
	.slide.right.ng-leave.ng-leave-active {
	left: 100%;
	opacity: 0;
	}

	.slide.left.ng-enter.ng-enter-active,
	.slide.left.ng-leave,
	.slide.right.ng-enter.ng-enter-active,
	.slide.right.ng-leave {
	left:0;
	opacity: 1;
	}

	.slide.left.ng-leave.ng-leave-active,
	.slide.right.ng-enter {
	left: -100%;
	opacity: 0;
	}

	.view {
	width: 500px;
	height: 300px;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

	padding: 10px;
	}

	.view-A {
	background-color: #CC71FF;
	}

	.view-AB {
	background-color: #328AE8;
	}

	.view-ABC {
	background-color: #44FF8A;
	}

	.view-ABCD {
	background-color: #E8E832;
	}