AngularJS bidirectionnal ng-views animations

Shows how to dynamically change the ng-view animation.

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<script src="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"></script>
<ng-view ng-animate="{enter: 'enter', leave: 'leave'}"></ng-view>

<script type="text/ng-template" id="page1.html">
    <div class="page page1"><b> page 1 </b><br><br>
        <button  ng-click="go('/two')"  >go page 2</button>
    </div>
</script>
        
<script type="text/ng-template" id="page2.html">
    <div class="page page2" > <b> page 2 </b><br><br>
        <button  ng-click="go('/one')"  >go page 1</button> 
    </div>
</script>

CSS

* {
    font-family:'Droid Sans', sans-serif;
}
body {
    overflow:hidden;
    margin:0;
    padding:0;
}
.page {
    width:100%;
    height:200px;
    padding:20px;
}
.page1 {
    background-color: #ccc;
}
.page2 {
    background-color: #eee;
}
.enter-setup {
    position:absolute;
    -webkit-transition: 0.3s ease-out all;
    -webkit-transform:translate3d(100%,0,0) ;
}
.enter-setup.enter-start {
    position:absolute;
    -webkit-transform:translate3d(0,0,0) ;
}
.leave-setup {
    position:absolute;
    -webkit-transition: 0.3s ease-out all;
    -webkit-transform:translate3d(0,0,0);
}
.leave-setup.leave-start {
    position:absolute;
    -webkit-transform:translate3d(-100%,0,0);
}

JavaScript

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

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

app.controller('MainCtrl', function ($scope, $location) {
    $scope.go = function (path) {
        $location.path(path);
    }
});