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打开页面并放入breakpoint时function slidePage，转换似乎是从我指定的起点开始的。

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

4

0 回答 0