AngularJS window transitions

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

  <head>
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.13/angular-route.js"></script>
    <script src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-class="viewDirection">
    <div class="main" ng-view=""></div>
  </body>

</html>

// Code goes here

angular.module('App', ['ngRoute', 'ngAnimate', $timeout])
  .config(['$routeProvider',
    function($routeProvider) {
      $routeProvider
        .when('/view1', {
          templateUrl: 'view1.html',
          controller: 'NewCtrl',
          depth: 1
        })
        .when('/view2', {
          templateUrl: 'view2.html',
          controller: 'NewCtrl',
          depth: 2
        })
        .otherwise({
          redirectTo: '/view1'
        });
    }
  ])
  .run(['$rootScope',
    function($rootScope) {

      $rootScope.$on('$routeChangeStart', function(event, next, current) {
        $rootScope.viewDirection = 'ltr';
        if (current && next && (current.depth > next.depth)) {
          $rootScope.viewDirection = 'rtl';
        }
      });
    }
  ])
  .controller('NewCtrl', function($scope, $location) {
    $scope.goTo = function(route) {
      $location.path(route);
    }
  });

/* Styles go here */

body,
html {
  margin: 0;
  height: 100%;
}
.main,
.view1,
.view2,
.view-animate {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}
.static {
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  color: white;
}
button {
  font-size: 1em;
}
.main,
.main .view-animate {
  -webkit-transition: all 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  -moz-transition: all 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  -o-transition: all 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  transition: all 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.main.ng-enter,
.main.ng-enter-active,
.main.ng-leave,
.main.ng-leave-active{
  height: 100%;
}
.ltr .main.ng-enter .view-animate {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.ltr .main.ng-enter.ng-enter-active .view-animate {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.ltr .main.ng-leave.ng-leave-active .view-animate {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.rtl .main.ng-enter .view-animate {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.rtl .main.ng-enter.ng-enter-active .view-animate {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.rtl .main.ng-leave.ng-leave-active .view-animate {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

# AngularJS window transitions

This is an example of transitions between windows, but with the special thing that you can decide which part of the new view animates and which is static.

<div class="view1">

  <div class="view-animate">
    <h1>this is my view one</h1>
    <button ng-click="goTo('/view2')">Go to view 2</button>
  </div>
  
  <div class="static">
    This will be static
  </div>
  
</div>

<div class="view2">

  <div class="view-animate">
    <h1>this is my view two</h1>
    <button ng-click="goTo('/view1')">Go to view 1</button>
  </div>

  <div class="static">
    This will be static
  </div>
  
</div>