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>
<body ng-controller="AppController as app">
  <div ng-view id="root"></div>

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

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

CSS

* {
  margin: 0;
}

html, body {
  height: 100%;
}

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

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

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

JavaScript

(function() {
  'use strict'

  angular.module('app', ['ngRoute'])
    .controller('AppController', ['$rootScope', function($rootScope) {
    }])
    .config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'top',
        })
        .when('/setting', {
          templateUrl: 'setting',
        })
    }])

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