JSFiddle - React, Tailwind, and code Playground

HTML

<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>
<!-- Viewable items in Window -->
<div class='view-container' ng-app="app" ng-controller='AppCtrl'>
    <button ng-click='slideChange("Left")'>Slide Left</button>
    <button ng-click='slideChange("Right")'>Slide Right</button>

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

<!-- !!!                                                       !!! -->    
<!-- !!! Change the following class to see working transitions !!! -->
<!-- !!! on enter and leave. slide-left or slide-right         !!! -->
    <div id="slideView" ng-view 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: 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;
    right: 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: 0px;
    right: 0px;
}
.slide-right.ng-leave {
    z-index: 101;
    left: 200%;
}
.slide-right.ng-leave.ng-leave-active {
    left: 100%;
}

JavaScript

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;
        }
    };
});;

// Set the animation based on the button selected or using the direction of button.
function AppCtrl($scope, $location, viewSlideIndex) {
    $scope.slideView = function (index, url) {

        /* if (viewSlideIndex.getViewIndex() > index) {
            $('#slideview')
                .toggleClass("slide-left", false)
                .toggleClass("slide-right", true);
        } else {
            $('#slideview')
                .toggleClass("slide-left", true)
                .toggleClass("slide-right", false);
        }; */
         //
        // Set the value of the current view index to compare against here:
        //
        if (viewSlideIndex.getViewIndex() > index)
            $scope.slideDir = 'slide-left';
        else
            $scope.slideDir = 'slide-right';
        viewSlideIndex.setViewIndex(index);
        $location.url(url);
        $location.url(url);
    }
    $scope.slideChange = function (direction) {
        if (direction === "Left") {
            $('#slideView')
                .toggleClass("slide-left", true)
                .toggleClass("slide-right", false);
        } else {
            $('#slideView')
               ...