<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" data-semver="1.9.1" data-require="jquery@*"></script>
<script data-require="bootstrap@3.0.0" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link data-require="bootstrap@3.0.0" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link data-require="font-awesome@4.0.3" data-semver="4.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<link href="style.css" rel="stylesheet" />
<script src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1" data-require="angular@1.2.1"></script>
<script src="http://code.angularjs.org/1.2.1/angular-route.js" data-semver="1.2.1" data-require="angular-route@1.2.0"></script>
<script src="http://code.angularjs.org/1.2.0/angular-animate.js" data-semver="1.2.0" data-require="angular-animate@1.2.0"></script>
<script src="http://code.angularjs.org/1.2.1/angular-sanitize.js" data-semver="1.2.1" data-require="angular-sanitize@1.2.0"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<ul class="nav nav-pills">
<li ng-class="{active: matchesRoute('/home', '')}">
<a href="#/home" class="btn" style="font-size: 14px">
<i class="fa fa-home"></i> Home</a>
</li>
<li ng-class="{active: matchesRoute('/bellsAndWhistles')}">
<a href="#/bellsAndWhistles"><i class="fa fa-bell"></i> BellsAndWhistles</a>
</li>
<li ng-class="{active: matchesRoute('/about')}">
<a href="#/about"><i class="fa fa-info"></i> About</a>
</li>
</ul>
<div class="view-animate-container">
<div class="well slide" ng-view>
<!-- view container. Asynchronously loaded view templates are placed here -->
</div>
<div class="well pink">
<p>This content, will be jumpy. Which may be undesired behaviour.</p>
<p>We also have content below the horizon line, if the content is outside the view-animate-container div</p></div>
</div>
<div><p>And, this content, will be always below the horizon line. Which may be undesired behaviour.</p></div>
</body>
</html>
// Code goes here
angular.module('myApp', ['ngRoute', 'ngAnimate'])
.run(function($rootScope, $location){
$rootScope.matchesRoute = function() {
for(var i=0; i<arguments.length; i++) {
if($location.path() === arguments[i]) {
return true;
}
}
return false;
}
})
.config(function($routeProvider) {
$routeProvider
.when('/bellsAndWhistles', {templateUrl: 'bellsAndWhistles.html', controller: angular.noop()})
.when('/about', {templateUrl: 'about.html', controller: angular.noop()})
.otherwise({redirectTo: '', templateUrl: 'home.html'});
});
html, body{
height: 100%;
}
.view-animate-container {
position: relative;
overflow: hidden;
height:100%;
}
.view-animate-container > .slide.ng-enter,
.view-animate-container > .slide.ng-leave {
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
transition: all ease 0.5s;
width: 100%;
position:absolute;
}
.view-animate-container > .slide.ng-enter {
left:100%;
opacity: 0;
}
.view-animate-container > .slide.ng-enter.ng-enter-active {
left:0;
opacity: 1;
}
.view-animate-container > .slide.ng-leave.ng-leave-active {
left: -100%;
opacity: 0;
}
.pink{
background-color:rgba(255,5,5,.25);
}
This is a little testapp build with angularjs 1.2.0, angular-route and angular-animate. bootstrap was used for styling.
<div>
<h3>Catfood here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus ut ex egestas, rutrum dolor vel, malesuada augue.
Phasellus egestas fringilla tortor, non imperdiet quam venenatis ac.
Sed arcu diam, ullamcorper ut eros vitae, aliquam euismod tortor.
Praesent id metus a dolor tempus dapibus quis volutpat dolor.
</p>
<p>Etiam ac tellus tincidunt, ullamcorper lorem ut, elementum orci. Maecenas
sed sapien nisl. Duis tempus metus mollis consectetur cursus. Nunc eleifend
elit nec felis dapibus sagittis. Duis sem ligula, commodo pellentesque
viverra sed, semper sed magna. Ut a sapien libero. Phasellus justo purus,
blandit quis facilisis id, ornare ac magna. Aenean sapien metus, mattis at eros
id, euismod facilisis augue.
</p>
<p>Cras sed nunc et elit lacinia bibendum in nec nunc. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Ut interdum placerat dapibus.
</p>
</div>
<h3>about</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus ut ex egestas, rutrum dolor vel, malesuada augue.
Phasellus egestas fringilla tortor, non imperdiet quam venenatis ac.
Sed arcu diam, ullamcorper ut eros vitae, aliquam euismod tortor.
Praesent id metus a dolor tempus dapibus quis volutpat dolor.
</p>
<p>Etiam ac tellus tincidunt, ullamcorper lorem ut, elementum orci. Maecenas
sed sapien nisl. Duis tempus metus mollis consectetur cursus. Nunc eleifend
elit nec felis dapibus sagittis. Duis sem ligula, commodo pellentesque
viverra sed, semper sed magna. Ut a sapien libero. Phasellus justo purus,
blandit quis facilisis id, ornare ac magna. Aenean sapien metus, mattis at eros
id, euismod facilisis augue.
</p>
<h1>Angular 1.2.0 App with routes, async templates, ng-view and css3 slide animation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus ut ex egestas, rutrum dolor vel, malesuada augue.
Phasellus egestas fringilla tortor, non imperdiet quam venenatis ac.
Sed arcu diam, ullamcorper ut eros vitae, aliquam euismod tortor.
Praesent id metus a dolor tempus dapibus quis volutpat dolor.
</p>
<p>Cras sed nunc et elit lacinia bibendum in nec nunc. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Ut interdum placerat dapibus.
</p>
<p>Etiam ac tellus tincidunt, ullamcorper lorem ut, elementum orci. Maecenas
sed sapien nisl. Duis tempus metus mollis consectetur cursus. Nunc eleifend
elit nec felis dapibus sagittis. Duis sem ligula, commodo pellentesque
viverra sed, semper sed magna. Ut a sapien libero. Phasellus justo purus,
blandit quis facilisis id, ornare ac magna. Aenean sapien metus, mattis at eros
id, euismod facilisis augue.
</p>