javascript - iPhone上的JavaScript动画滞后

我不知道为什么，但是我的动画在chrome上效果很好，但在iPhone上却落后。我正在使用jQuery来简化工作并具有以下功能。

function slideLeftTo(to, after) {
    var page = $(to);
    var current = $(".current");

    if (page.length < 1) return;
    if (current.length < 1) return;

    if (page.attr("id") == current.attr("id")) return;

    var endX = current.width();

    page.css({ top: "0px", left: endX + "px", display: "block" });
    current.css({ top: "0px", left: "0px" });

    var x = endX;
    var timer = setInterval(function() {
        if (x < 0) {
            x = 0;
            clearInterval(timer);
        }

        page.css({ top: "0px", left: x + "px" });
        current.css({ top: "0px", left: (x - endX) + "px" });

        x -= 100;

        if (x <= 0) {
            after();
        }
    }, 50);
}

function slideRightTo(to, after) {
    var page = $(to);
    var current = $(".current");

    if (page.length < 1) return;
    if (current.length < 1) return;

    if (page.attr("id") == current.attr("id")) return;

    var endX = current.width();

    page.css({ top: "0px", left: -endX + "px", display: "block" });
    current.css({ top: "0px", left: "0px" });

    var x = 0;
    var timer = setInterval(function() {
        if (x > endX) {
            x = endX;
            clearInterval(timer);
        }

        page.css({ top: "0px", left: (x - endX) + "px" });
        current.css({ top: "0px", left: x + "px" });

        x += 100;

        if (x >= endX) {
            after();
        }
    }, 50);
}

我可以简单地将这些函数称为工作函数，它们虽然起作用，但仍然滞后。我称呼他们的方式是...

slideLeftTo('#div_id', function() {
   console.log("It was animated!");
});

我知道您可以指出我的功能出了什么问题。

最佳答案

我通过完全使用CSS动画解决了该问题。我使用了translate3D属性来做到这一点。