JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-route.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.js"></script>
<!-- Viewable items in Window -->
<div class='view-container' ng-app="app" ng-controller='AppCtrl'>

    <button ng-click='slideView(1, "/pg1")'>Pg1</button>
    <button ng-click='slideView(2, "/pg2")'>Pg2</button>
    <button ng-click='slideView(3, "/pg3")'>Pg3</button>

    <div id="slideView" ng-view ng-class="slideDir" class="slide"></div>

<!-- Templates loaded on url change -->
<script type=text/ng-template id="pg1.html">
    <H3>Pg1</H3>
</script>
<script type=text/ng-template id="pg2.html">
    <H3>Pg2</H3>
</script>
<script type=text/ng-template id="pg3.html">
    <H3>Pg3</H3>
</script>

</div>

CSS

.slide-left.ng-enter,
.slide-left.ng-leave,
.slide-right.ng-enter,
.slide-right.ng-leave {
  -webkit-transition: 0.5s ease-in-out ;
  -moz-transition: 0.5s ease-in-out ;
  -o-transition: 0.5s ease-in-out ;
  transition: 0.5s ease-in-out ;
  position: absolute;
  width: 100%;
}
.slide-left.ng-enter {
  z-index: 100;
  left: 100%;
}
.slide-left.ng-enter.ng-enter-active {
  left: 0;
  right: 0;
}
.slide-left.ng-leave {
  z-index: 101;
  left: 0;
}
.slide-left.ng-leave.ng-leave-active {
  left: -100%;
}

.slide-right.ng-enter {
  z-index: 100;
  left: -100%;
}
.slide-right.ng-enter.ng-enter-active {
  left: 0;
}
.slide-right.ng-leave {
  z-index: 101;
  left: 0;
}
.slide-right.ng-leave.ng-leave-active {
  left: 100%;
}

JavaScript

// Set the animation based on the button selected or using the direction of button.
function AppCtrl($scope, $location, viewSlideIndex) {
    $scope.slideView = function (index, url) {
        //
        // Set the value of the current view index to compare against here:
        //
        if (viewSlideIndex.getViewIndex() > index) {
            $scope.slideDir = 'slide-right';
        } else {
            $scope.slideDir = 'slide-left';
        };
        viewSlideIndex.setViewIndex(index);
        $location.url(url);
    }
    
};

angular.module('app', ['ngRoute', 'ngAnimate'])
    .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/pg1', {
        templateUrl: 'pg1.html',
        controller: AppCtrl
    });
    $routeProvider.when('/pg2', {
        templateUrl: 'pg2.html',
        controller: AppCtrl
    });
    $routeProvider.when('/pg3', {
        templateUrl: 'pg3.html',
        controller: AppCtrl
    });
    $routeProvider.otherwise({
        redirectTo: '/pg1'
    });
    $locationProvider.html5Mode(true);
}])
    .service('viewSlideIndex', function () {
    var viewIndex;
    return {
        getViewIndex: function () {
            return viewIndex;
        },
        setViewIndex: function (val) {
            viewIndex = val;
        }
    };
});;