AngularJS ng-view animation example

angular.module("MyApp", ["ngAnimate", 'ngRoute'])
  .config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/one', {
                templateUrl: 'one.html',
                controller: menuCtrl
            })
            .when('/two', {
                templateUrl: 'two.html',
                controller: menuCtrl
            })
            .when('/three', {
                templateUrl: 'three.html',
                controller: menuCtrl
            });
    } ]);

function menuCtrl($scope, $location) { 

    $scope.goTo = function (path) {
        $location.path(path);
    };
};

.my-slide-container {
  position:relative;
}
.my-slide-animation.ng-enter, .my-slide-animation.ng-leave {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;

  position:absolute;
  top:0;
  left:0;
  right:0;
  height:600px;
}

.my-slide-animation.ng-enter {
  z-index:100;
  top:600px;
  opacity:0;
}
.my-slide-animation.ng-enter.ng-enter-active {
  top:0;
  opacity:1;
}

.my-slide-animation.ng-leave {
  z-index:101;
  top:0;
  opacity:1;
}
.my-slide-animation.ng-leave.ng-leave-active {
  top:-600px;
  opacity:0;
}

<!doctype html>
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.0/angular-animate.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="angularjs-1.2-animate-app.js"></script>
<link rel="stylesheet" type="text/css" href="transitions.css" />
</head>
<body>
<div ng-controller="menuCtrl">
  <button ng-click="goTo('/one')">One</button>
  <button ng-click="goTo('/two')">Two</button>
  <button ng-click="goTo('/three')">Three</button>
  <div class="my-slide-container">
    <div ng-view class="my-slide-animation"></div>
  </div>
</div>

<script type="text/ng-template" id="one.html">
  one
</script>

<script type="text/ng-template" id="two.html">
  two
</script>

<script type="text/ng-template" id="three.html">
  three
</script>

</body>
</html>