我正在尝试将页面引入和退出viewport
使用CSS transitions
.
这背后的基本思想是<div>
通过应用
-webkit-transform: translate3d(0, 0, 0);
并通过应用将所有其他内容置于<div>
视口之外
-webkit-transform: translate3d(100%, 0, 0);
以下是执行此操作的示例代码
<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>
为了将页面带入视口,我必须将页面放在视口左侧或右侧的动画起点,然后将页面带入视口。
正如上面代码中所指定的,我将所有页面(<div>
)保留在视口的右侧。
下图将显示该场景。
但是,在任何页面转换(引入<div>
和退出视口)之前,我指定了转换的起点,它可以是左侧的,也可以是右侧的,但所有的转换都是从右侧发生的。
事实上,当我debug
打开页面并放入breakpoint
时function slidePage
,转换似乎是从我指定的起点开始的。
我不知道为什么会这样。
为了从我指定的起点开始过渡,需要进行哪些更改?