7

ユーザーが中央の仕切りを移動して 2 列のレイアウトのサイズを変更できるようにする Phonegap アプリを構築しようとしています。

私はこれを機能させることができましたが、UX に大きな問題があります。遅延です。ひどいものではありませんが、最新の iPad ではさらに目立つので、心配です。

サイズ変更を行うJSは次のとおりです。

$("div").on("touchmove", "#columnResizeIcon", function(e) {
    e.preventDefault();
    var left = e.originalEvent.touches[0].pageX;
    var right = $("#columnContainer").width() - left;

    $("#leftColumn").css({
       "width":left - 1 + "px",
       "right":"auto",
    });
    $("#rightColumn").css({
       "width":right - 1 + "px",
       "left":"auto",
    });
    $("#columnResize").css({
       "-webkit-transform":"translate3d(" + left  + "px" + ", 0, 0)",
       "left":"auto",
    });
    $("#columnResizeIcon").css({
       "-webkit-transform":"translate3d(" + left  + "px" + ", 0, 0)",
       "left":"auto",
    });
});

translate3d()要素の「左」の値を変更するために利用していることに気付くでしょう。これは、ハードウェア アクセラレーションによるものです。左右の列の幅を変更することでラグが発生していると思います。これは、ハードウェアを高速化するために必要なものです。

私がうまくいくと思った解決策は-webkit-transform:translate3d(50%, 0, 0)、右側の列をページの半分以上にプッシュし、その値を変更して、親に到達するまで伸びることを期待することです。ただし、それは継続し、親の 50% ではなく、ページの 50% になります。

私の HTML マークアップは次のようになります。

<div id="columnContainer">
    <div id="columnResize"></div>
    <div id="columnResizeIcon"></div>

    <div id="leftColumn">
        <div class="header">Left Header</div>
        <div class="content"></div>

    </div>
    <div id="rightColumn">
        <div class="header">Right Header</div>
        <div class="content"></div>
    </div>
</div>

そして私のCSS：

body{
    background-color:#000;
}

#columnContainer{
    position: absolute;
    bottom:0;
    top:0;
    right:0;
    left:0;
    background-color:#000;
}

#leftColumn{
    position: absolute;
    top:0;
    left:0;
    right:50%;
    bottom:0;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    margin-right: 1px;
}

#rightColumn{
    position: absolute;
    top:0;
    left:50%;
    right:0;
    bottom:0;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    margin-left: 1px;
}

.header{
    position: absolute;
    left:0;
    right:0;
    height:33px;
    z-index: 5;
    background: -webkit-linear-gradient(top, #f4f5f7 0%,#a7abb7 100%);
    box-shadow:  inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090, 3px 0 2px rgba(0,0,0,.3);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 17px;
    font-family: Helvetica;
    font-weight: bold;
    letter-spacing: .2px;
    text-align: center;
    padding-top:9px;
    color:#71787F;
    text-shadow: 0 1px 0 #E3E5E9;
}

.content{
    position: absolute;
    left:0;
    right: 0;
    top:42px;
    bottom: 0;
}

#leftColumn .content{
    background-color:#F5F5F5;
}

#rightColumn .content{
    background-color:#fff;
}

#columnResize{
    position: absolute;
    width:2px;
    top:0;
    bottom: 0;
    left:50%;
    margin-left:-1px;
    background-color:#000;
    z-index: 2;
}

#columnResizeIcon{
    position: absolute;
    z-index: 3;
    width:10px;
    height:30px;
    top:50%;
    bottom:50%;
    margin-top:-15px;
    left:50%;
    margin-left:-7px;
    border-left:2px solid #000;
    border-right:2px solid #000;
}
4

2 に答える 2

0

ハードウェア アクセラレーション スタックで次の 2 つの要素に疑問を投げかけることで、ある程度の成功を収めました。

#leftColumn,
#rightColumn {
  -webkit-transform: translate3d(0,0,0);
}

サイズ変更がはるかにスムーズに行われるようです。変更width自体が最適化されているわけではなく、要素自体がはるかに迅速に再レンダリングされます。

ここにプランクを設定しました: http://plnkr.co/edit/5RMtCl1Sql8f3CmQLHFz

于 2013-03-27T22:41:42.937 に答える