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