JSFiddle - React, Tailwind, and code Playground

by scabro

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="wrapper" ng-app="myApp">
    
    <div page-animate>
    
        <p>
            <a class="btn btn-primary" href="#/" ng-click="slidePage()">Home</a>
            <a class="btn btn-info" href="#/users" ng-click="slidePage()">Users</a>
            <a class="btn btn-success" href="#/pages" ng-click="slidePage()">Pages</a>
        </p>
        <div id="relativeContainer">
        
            <div id="content" ng-view=""></div>
        
        </div>
        
    </div>
    
</div>

CSS

#wrapper {
    text-align:center;
    padding:30px 0;
}
#relativeContainer {
    text-align:left;
    position: relative;
    width: 500px;
    height: 800px;
    min-height: 800px;
    margin: 0 auto;
    overflow: hidden;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

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

myApp.directive('pageAnimate', function() {

    return {

        restrict: 'A',

        scope: { },

        link: function (scope, elem, attrs) {
            
            scope.slidePage = function() {

                var thisContainer = $('#content');

                var thisHeight = thisContainer.outerHeight();

                thisContainer.animate({ top : '-' + thisHeight + 'px'}, { duration : 300, complete : function() {
                    
                    thisContainer.css({ top : '-999999em' });
                    
                    var thisNewHeight = thisContainer.outerHeight();
                    
                    $('#relativeContainer').animate({ height : thisNewHeight + 'px' }, { duration : 200, complete : function() {
                    
                        thisContainer.css({ top : '-' + thisNewHeight + 'px' }).animate({ top : 0 }, { duration : 300 });
                        
                    }});

                }});

            };

        }

    }

});


myApp.config(function($routeProvider) {

    $routeProvider
        .when('/',
            {
                controller: 'HomeController',
                template: '<h1>{{ heading }}</h1><p>{{ content }}</p>'
            }
        )
        .when('/users',
            {
                controller: 'UserController',
                template: '<h1>{{ heading }}</h1><p>{{ content }}</p>'
            }
        )
        .when('/pages',
            {
                controller: 'PageController',
                template: '<h1>{{ heading }}</h1><p>{{ content }}</p>'
            }
        )
        .otherwise(
            {
                redirectTo: '/'
            }
        )

});

myApp.controller('HomeController', function($scope) {
    
    $scope.heading = 'Home page';
    $scope.content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...