1


我正在尝试将页面引入和退出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打开页面并放入breakpointfunction slidePage,转换似乎是从我指定的起点开始的。

我不知道为什么会这样。
为了从我指定的起点开始过渡,需要进行哪些更改?

4

0 回答 0