javascript - 滑动 css 过渡缓慢

Question

我正在尝试为 ipad 构建一个滑动菜单，其中滑动将导致来自下一个菜单点的内容将当前内容推出。

但是，几乎没有任何内容(或只有 div 中的图像)，它非常流畅。但是，一旦我引入了一个更合规的 DOM，它在启用触摸的 chrome 中就会变得缓慢，并且在 ipad3 和 ipad2 上无法使用。

我已经使用 transform: translate3d 来启用硬件加速，但它似乎并没有削减它。有没有其他方法可以提高性能。我见过一些网站以非常流畅的滑动动画呈现相当多的内容(例如 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;

在 swipeArea 上进行 CSS 转换。

Answer 1

我可能是错的，但是设置 left(并为其设置动画)完全不同于 translate3d:left 不是硬件加速的，而translate3d 是。这可能就是它运行不流畅的原因。

translate3d 需要x、y 和z 形式的参数。 x 是水平轴，y 是垂直轴，z 是“深度”轴，如果您愿意的话。不久前我遇到了一个类似的案例并创建了一个简单的 jquery 函数来计算我的滑动元素的宽度(在你的例子中；下一页)，并设置一个 translate3d 样式该元素上 x 的负值(元素向左移动)或正值(元素向右移动)。

假设你的滑动元素是 1200px 宽，你可以通过如下设置它的样式来设置它的动画:

1. 元素是下一页:translate3d(1200px,0px,0px)
2. 元素是当前页面:translate3d(0px,0px,0px)
3. 元素是上一页:translate3d(-1200px,0px,0px)

(如果元素有边距，不要忘记合并边距。只需将它们添加到 x 值)

Here is more on CSS (3d) transforms