I want to create a sliding in/out effect for my views similar to what is demonstrated here:
Here is the Plunker I have created: http://plnkr.co/edit/ST49iozWWtYRYRdcGGQL?p=preview
However, when I copy the CSS from the link above, my entire ui-view disappears and I suspect it may be related to the position: relative in my container
CSS:
*,
*:after,
*:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 62.5%;
min-height: 100%;
position: relative;
}
html body {
font-size: 140%;
line-height: 1.5;
margin: 0;
padding: 0 0;
margin-bottom: 60px;
}
.container {
max-width: 430px;
margin: 0 auto;
position: relative;
display: block;
float: none;
overflow: hidden;
}
.l-one-whole {
width: 100%;
}
form {
background: #f0f0f0;
height: 350px;
padding: 10px;
font-size: 1.4em;
}
CSS needed to add:
.slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide.ng-enter,
.slide.ng-leave {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.slide.ng-enter {
left: 100%;
}
.slide.ng-enter-active {
left: 0;
}
.slide.ng-leave {
left: 0;
}
.slide.ng-leave-active {
left: -100%;
}
HTML:
<body ng-controller="MainCtrl">
<ul>
<li><a href="#/view1">view1</a>
</li>
<li><a href="#/view2">view2</a>
</li>
</ul>
<main class="l-one-whole">
<section class="container">
<article class="l-one-whole">
<div ui-view class="slide"></div>
</article>
</section>
</main>
</body>
JS:
var app = angular.module('plunker', ['ui.router', 'ngAnimate']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('view1', {
url: '/view1',
templateUrl: 'page1.html'
})
.state('view2', {
url: '/view2',
templateUrl: 'page2.html'
});
$urlRouterProvider.otherwise('/view1');
});
Any assistance would be greatly appreciated.