Angular fade out/in 1.2.0rc1

<!DOCTYPE html>
<html data-ng-app="demo">

  <head>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.0rc1/angular-route.js"></script>
    <script src="http://code.angularjs.org/1.2.0rc1/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="header">
      <h1>class="fade" (what we want)</h1>
    </div>
    <div class="container">
      <div ng-view="" class="view fade"></div>
    </div>
    <div class="header">
      <h1>ng-class="{fade: true}" (fades out, but not in)</h1>
    </div>
    <div class="container">
      <div ng-view="" class="view" ng-class="{fade: true}"></div>
    </div>
    <div class="header">
      <h1 ng-non-bindable>class="{{'fade'}}" (same as the above)</h1>
    </div>
    <div class="container">
      <div ng-view="" class="view {{'fade'}}"></div>
    </div>

  </body>
</html>

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

app.config(function ($routeProvider) {
  $routeProvider
  .when('/one', {
    templateUrl:'page1.html',
    controller: 'Page1Ctrl'
  })
  .when('/two', {
    templateUrl:'page2.html',
    controller: 'Page2Ctrl'
  })
  .otherwise({
    redirectTo:'/one'
  });
});

/**
 * Page1Ctrl
 * Page 1's controller
 */
app.controller('Page1Ctrl', function($scope, $location) {    
  $scope.name = "Page 1";
  $scope.page2 = function() {
    $location.path('/two');
  }
});

/**
 * Page2Ctrl
 * Page 2's controller
 */
app.controller('Page2Ctrl', function($scope, $location) {    
  $scope.name = "Page 2";
  
  $scope.page1 = function() {
    $location.path('/one');
  }
});

.container {
  position: relative;
  width: 100%;
  height: 150px;
}

.view {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.page {
  width:50%;    
  height: 100%;
  padding:20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.page1 {
  background-color: red;
}
.page2 {
  margin-left: 50%;
  background-color: blue;
}

.header{  
  border-bottom: green 1px dashed;
  margin-bottom: 10px;
}
.footer{  
  border-top: green 1px dashed;
  margin-top: 10px;
}


/* Animations */


.fade.ng-enter, .fade.ng-leave {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 2000ms;
  -moz-animation-duration: 2000ms;
  -ms-animation-duration: 2000ms;
  -o-animation-duration: 2000ms;
  animation-duration: 2000ms;
}

.fade.ng-enter {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-delay: 1000ms;
  -moz-animation-delay: 1000ms;
  -ms-animation-delay: 1000ms;
  -o-animation-delay: 1000ms;
  animation-delay: 1000ms;
}

.fade.ng-leave {
  
  -webkit-animation-name: fadeOut;
  -moz-animation-name: fadeOut;
  -ms-animation-name: fadeOut;
  -o-animation-name: fadeOut;
  animation-name: fadeOut;
}


@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

<div class="page page1">
  <p>This is {{ name }}</p>
  <button  ng-click="page2()">go page 2</button>
</div>

<div class="page page2">
  <p>This is {{ name }}</p>
  <button  ng-click="page1()">go page 1</button>
</div>