我正在尝试为 ipad 构建一个滑动菜单，其中滑动将导致来自下一个菜单点的内容将当前内容推出。
但是，几乎没有内容（或只有 div 中的图像），它非常流畅。但是，一旦我引入了一个更复杂的 DOM，它在启用触摸的 chrome 中就会变得迟缓，并且在 ipad3 和 ipad2 上无法使用。
我使用了 transform: translate3d 来启用硬件加速，但它似乎并没有削减它。有没有其他方法可以提高性能。我看过一些网站，它们以非常流畅的滑动动画呈现大量内容（例如，移动剧本），但我无法获得同样的感觉。
我使用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 转换。