AngularJS bidirectionnal ng-views animations

Shows how to dynamically change the ng-view animation.

by marhaba

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>
<style ng-bind-html-unsafe="style"></style>

<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="direction('front');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="direction('back');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;
}

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, $rootScope, $location) {

  var styles = {
    // appear from right
    front: '.enter-setup {   position:absolute;   -webkit-transition: 0.5s 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.5s ease-out all;   -webkit-transform:translate3d(0,0,0)} .leave-setup.leave-start {   position:absolute;  -webkit-transform:translate3d(-100%,0,0) };',
    // appear from left
    back: '.enter-setup {   position:absolute;   -webkit-transition: 0.5s 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.5s ease-out all;  -webkit-transform:translate3d(0,0,0)} .leave-setup.leave-start {   position:absolute;  -webkit-transform:translate3d(100%,0,0) };'
  };
  
  $scope.direction = function(dir) {
    // update the animations classes
    $rootScope.style = styles[dir];
  }

  $scope.go = function(path) {
    $location.path(path);
  }
  $scope.direction('front');
});