I'm trying to bring page in and out of viewport using CSS transitions.
The basic idea behind this is to put <div> in viewport by applying
-webkit-transform: translate3d(0, 0, 0);
and put all other <div> out of viewport by applying
-webkit-transform: translate3d(100%, 0, 0);
Following is the sample code for doing this
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
body {
overflow: hidden;
}
div[data-type='page'] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
div[data-position='left'] {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
div[data-position='center'] {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-duration: .25s;
transition-duration: .25s;
}
div[data-position='right'] {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
</style>
</head>
<body>
<div id="p1" data-type="page" data-position="center" style="background-color: pink">
<h1>Page 1</h1>
<a id='a1' href="#">Page 2</a>
</div>
<div id="p2" data-type="page" style="background-color: red">
<h1>Page 2</h1>
<a id='a2' href="#">page 3</a>
</div>
<div id="p3" data-type="page" style="background-color: green">
<h1>Page 3</h1>
<a id='a3' href="#">page 1</a>
</div>
<script>
$('#a1').on('click',function(){
slidePage('#p2','right');
});
$('#a2').on('click',function(){
slidePage('#p3','right');
});
$('#a3').on('click',function(){
slidePage('#p1','left');
});
function slidePage(toPage,from) {
$("div[data-position='center']").attr('data-position','');
$(toPage).attr('data-position',from);
$(toPage).attr('data-position','center');
}
</script>
</body>
</html>
In order to bring a page in viewport with transition,I have to put the page at starting point of animation which is either left or right of viewport and then bring the page in viewport.
As specified in above code,I'm keeping all pages (<div>) at the right of viewport.
Following picture will show the scenario.
However, before any page transition (to bring a <div> in and out of viewport), I'm specifying the starting point of transition which is either left or right but all transitions are occurring from right side.
In fact when I debug the page and put breakpoint in function slidePage,the transition seems to be occurred from the starting point that I specified.
I don't know why this is happening.
What are the changes that need to be done in order to start the transition from the starting point that I specify ?
