Question

我正在尝试使用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>）保留在视口右侧。
下图将显示该场景。 enter image description here
然而，在任何页面转换之前（为了使<div>进出视口），我指定了转换的起点，它是向左或向右，但所有转换都是从右侧发生的。

实际上，当我debug页面并将breakpoint放入function slidePage时，转换似乎是从我指定的起点开始的。

我不知道为什么会发生这种情况。
为了从我指定的起点开始过渡，需要做些哪些改变？

使用CSS转换在视口中进行页面转换

0 个答案: