Page transition animation

Page transition animation using AngularJS/ngRoute

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular-animate.min.js"></script>
<body ng-controller="AppController as app"
      ng-class="pageTransitionAnimType">
  <div ng-view id="root"></div>

  <script id="top" type="text/ng-template">
    <div class="top">
      <h3>Top page</h3>
      <a href="#/setting" page-transit-anim="scaledown-frombottom">Go to setting</a>
    </div>
  </script>

  <script id="setting" type="text/ng-template">
    <div class="setting">
      <h3>Setting</h3>
      <a href="#/" page-transit-anim="movetobottom-scaleup">Back</a>
    </div>
  </script>
</body>

CSS

* {
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  background-color: black;
}

#root {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: 500ms;
}

.top {
  background-color: red;
  width: 100%;
  height: 100%;
}

.setting {
  background-color: green;
  width: 100%;
  height: 100%;
}

.scaledown-frombottom .ng-enter {
  top: 100%;
}

.scaledown-frombottom .ng-enter.ng-enter-active {
  top: 0%;
}

.scaledown-frombottom .ng-leave {
  transform: scale(1);
  opacity: 1;
}

.scaledown-frombottom .ng-leave.ng-leave-active {
  transform: scale(0.75);
  opacity: 0.5;
  z-index: -1000;
}

.movetobottom-scaleup .ng-enter {
  transform: scale(0.75);
  opacity: 0.5;
  z-index: -1000;
}

.movetobottom-scaleup .ng-enter.ng-enter-active {
  transform: scale(1);
  opacity: 1;
  z-index: 0;
}

.movetobottom-scaleup .ng-leave {
  top: 0%;
}

.movetobottom-scaleup .ng-leave.ng-leave-active {
  top: 100%;
}

JavaScript

(function() {
  'use strict'

  angular.module('app', ['ngRoute', 'ngAnimate'])
    .controller('AppController', ['$rootScope', function($rootScope) {
      $rootScope.pageTransitionAnimType = ''
    }])
    .config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'top',
        })
        .when('/setting', {
          templateUrl: 'setting',
        })
    }])
    .directive('pageTransitAnim', ['$rootScope', function($rootScope) {
      return {
        restrict: 'A',
        link: function(_scope, elem, attrs, _ctrl) {
          angular.element(elem).on('click touchstart', function() {
            $rootScope.pageTransitionAnimType = attrs.pageTransitAnim
          })
        },
      }
    }])

  angular.element(document).ready(() => {
    angular.bootstrap(document, ['app'])
  })
})()