iPhone 上的 JavaScript 动画滞后

Question

我不知道为什么，但我的动画在 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!");
});

我知道你可以指出我的函数有什么问题。

Answer 1

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