Javascript 滑动css转换缓慢

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

然而，由于几乎没有内容（或者只有div中的图像），它非常流畅。但是，一旦我引入了一个更为复杂的DOM，它在chrome中的触控功能就会变得迟钝，在ipad3和ipad2上无法使用

我使用了transform:translate3d来启用硬件加速，但它似乎并没有解决这个问题。有没有其他方法可以提高性能。我看过一些网站，它们用非常流畅的滑动动画（例如）呈现了相当多的内容，但我不能得到同样的感觉

我使用该插件介绍了以下格式的代码：

 $(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转换。

我可能错了，但是设置

左
（并设置动画）与
translate3d
完全不同：
left
不是硬件加速的，而
translate3d
是硬件加速的。这可能就是它运行不平稳的原因

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

假设滑动元素的宽度为1200px，则可以通过如下方式设置其样式来设置动画：

元素是下一页：
translate3d（1200px，0px，0px）
元素是当前页面：
translate3d（0px，0px，0px）
元素是上一页：
translate3d（-1200px，0px，0px）
（如果元素有边距，不要忘记合并边距。只需将它们添加到
x
值中即可）

简单评论一下，过渡属性和持续时间当然在-webkit、-moz等中。我只是为了减少代码混乱而粘贴了较少的内容。这就成功了，现在我只需要知道如何在.on（'move'functionTry
$（“#element”）.on（'move'，function（）{$（This）.addClass（'move#to#u left'））中动态更新translate3D；
，并在CSS中指定该类，为其提供正确的translate3d值。其想法是使页面与手指对齐，以便我可以移动页面，在“moveend”上我会。addClass（'move_to_the_left'）。我正在查看一些$（元素）。WebKittTransform='translate3d（'+deltaX+'px，0px，0px）“；但我似乎无法使其工作。请参阅此链接，我认为它将帮助您解决问题：感谢链接。我已经尝试过此技术，但无法使其工作。我将尝试调试代码，以找出它无法应用转换的原因。