Анимация JavaScript отстает на iPhone

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.