3

スワイプすると次のメニューポイントのコンテンツが表示され、現在のコンテンツが押し出される iPad 用のスワイプ メニューを構築しようとしています。

ただし、コンテンツがほとんどない場合 (または div 内の画像のみ) は非常に流暢です。しかし、よりコンパイルされた DOM を導入するとすぐに、タッチが有効になっている chrome で動作が遅くなり、ipad3 と ipad2 では使用できなくなります。

transform: translate3d を使用してハードウェア アクセラレーションを有効にしましたが、効果がないようです。パフォーマンスを向上させる他の方法はありますか。非常に滑らかなスワイプ アニメーションで非常に多くのコンテンツを表示する Web サイトをいくつか見たことがありますが (例: The Mobile Playbook )、同じ感覚を得ることができません。

jquery.event.swipeプラグインを使用して、この形式のコードを導入しました。

 $(document).ready(function(){
    var $swipeArea = $("#swipeBox"),
        $pages = $swipeArea.find(".page"),
        $currentPage = $(".currentPage"),
        index = $pages.index($currentPage),
        width = $swipeArea.width();

    $swipeArea
    .on('swipeleft', function(e){
        if(index == $pages.length - 1 ) { return; }
        $pages.eq(index+1).trigger('switchPage');
    })
    .on('swiperight', function(e){
        if(index == 0) { return; }
        $pages.eq(index-1).trigger('switchPage');
    })
    .on('switchPage', function(e){
        $pages.eq(index).removeClass("currentPage");
        $(e.target).addClass("currentPage");
        index = $pages.index($(e.target))
    });

このCSSを使用して：

.swipeContentArea .page{
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   -o-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   position:absolute;
   left:-100%;
   height:100%;
   z-index:1;
   overflow-x:hidden;
} 
.swipeContentArea .page.currentPage{
   left:0;
   z-index:2;
}
.swipeContentArea .page.currentPage ~ .page {
   left:100%;
}

と 

  transition-property: left,height;
  transition-duration: 600ms;

CSS トランジションの swipeArea で。

4

1 に答える 1

2

私は間違っているかもしれませんが、 a の設定(およびアニメーション化)は:とはleft完全に異なります。これがおそらくスムーズに実行されない理由です。translate3dlefttranslate3d

translate3dx、yおよびzフォームにパラメータが必要です。x水平軸、y垂直軸、およびz「深さ」軸です。少し前に同様のケースに遭遇し、スライド要素（あなたの場合、次のページ）の幅を計算しtranslate3d、負（要素が左に移動）または正のいずれかでスタイルを設定する単純なjquery関数を作成しました(要素が右に移動)xその要素の値。

スライド要素の幅が 1200px だとすると、次のようにスタイルを設定してアニメーション化します。

  1. 要素は次のページです。translate3d(1200px,0px,0px)
  2. 要素は現在のページです:translate3d(0px,0px,0px)
  3. 要素は前のページです:translate3d(-1200px,0px,0px)

(要素にマージンがある場合は、マージンを組み込むことを忘れないでください。x値に追加するだけです)

CSS (3d) 変換の詳細はこちら

于 2012-10-10T13:53:17.617 に答える