Menu
I am trying to achieve the same effect of sliding in/out views as found here:
http://dfsq.github.io/ngView-animation-effects/app/#/page/1
Ive created a plunker: http://plnkr.co/edit/ST49iozWWtYRYRdcGGQL?p=preview
But my entire ui-view completely disappears when i copy the CSS from the link above and think it could be down 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 help appreciated.
918
I think this is what you are looking for: Plunkr
I added the following styles to make animations work:
/* Transition effects */
.l-one-whole {
position: relative;
overflow: hidden;
min-height: 400px;
}
.slide {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slide.ng-enter,
.slide.ng-leave {
transition: all 1s ease;
}
.slide.ng-enter {
transform: translate(100%, 0);
}
.slide.ng-enter-active {
transform: translate(0, 0);
}
.slide.ng-leave {
transform: translate(0, 0);
}
.slide.ng-leave-active {
transform: translate(-100%, 0);
}
I used transform instead of left because AFAIK it enables browser to accelerate animation using GPU increasing performance.
I hope I am not missing anything.
128
Result: http://plnkr.co/edit/vhGSiA?p=preview
I have use Angular 1.3.15 instead of 1.2.9
Simplified HTML
<section class="container">
<div ui-view class="slide-left"></div>
</section>
and more CSS
.container {
overflow: hidden;
position: relative;
}
.slide-left.ng-enter, .slide-left.ng-leave {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transition: transform .7s ease-in-out;
}
.slide-left.ng-enter {
z-index: 101;
transform: translateX(100%);
}
.slide-left.ng-enter.ng-enter-active {
transform: translateX(0);
}
.slide-left.ng-leave {
z-index: 100;
transform: translateX(0);
}
.slide-left.ng-leave.ng-leave-active {
transform: translateX(-100%);
}
form { /* contents within ui-view */
position:absolute;
}
Change
<script src="https://raw.github.com/dlukez/ui-router/angular-1.2/release/angular-ui-router.js"></script>
to:
<script src="https://cdn.rawgit.com/dlukez/ui-router/angular-1.2/release/angular-ui-router.js"></script>
Updated plnkr
Detail explaination can be found here:
Link and execute external JavaScript file hosted on GitHub
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
