JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://code.angularjs.org/1.5.8/angular-animate.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="AppCtrl">
<div class="btn-group">
<a class="btn btn-primary" href="./">foo</a>
<a class="btn btn-primary" href="bar/">bar</a>
</div>
<span class="btn btn-success">{{count}}</span>
<div class="view" ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></div>
</div>
</div>
CSS
body {
overflow: hidden;
padding: 40px
}
div.view {
background: #EEE;
position: absolute;
top: 80px;
right: 20px;
bottom: 20px;
left: 20px;
overflow: hidden;
}
a {
line-height: 20px;
}
span {
float: right;
}
h1 {
padding: 20px;
}
.view-enter-setup, .view-leave-setup {
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.view-enter-setup {
left:100%;
width:100%;
position:absolute;
}
.view-enter-setup.view-enter-start {
left:0;
}
.view-leave-setup {
position:absolute;
left:0;
width:100%;
}
.view-leave-setup.view-leave-start {
left:-100%;
}
JavaScript
var app = angular.module('app', []);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
template: '<h1 color>foo</h1>'
})
.when('/bar', {
template: '<h1 color>bar</h1>'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
app.controller('AppCtrl', function ($scope) {
$scope.count = 0;
$scope.incrementCount = function () {
$scope.count++;
}
});
app.directive('color', function () {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
$scope.incrementCount();
}
}
});