Как мне сделать мобильную анимацию отлично? - PullRequest
0 голосов
/ 06 сентября 2011

Как вы можете видеть, моя последняя запись не привлекла сообщества, но мне удалось заставить эту анимацию на iPhone работать с переходами CSS3 довольно здорово.

Я нормализовал свой код для использования CSS3-анимации.Это немного лучше, чем то, что я видел при использовании JavaScript.Но все равно анимация отстает на устройстве.У меня есть много DIV внутри <body>, и будет виден только один за раз, а все остальные будут скрыты.

Если вы посмотрите на это изображение, это 4 DIV, но второй DIV в настоящее время отображается наустройство.Теперь я хочу, чтобы вы написали мне некоторый код, чтобы понять, как я могу применить перемещение DIV вдоль оси x, так как будет показан только один?

enter image description here

ОБНОВЛЕНО

Код, который я сейчас имею, это ...

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", display: "block" });

    setTimeout(function() {
        current.css("left", -endX + "px");
        page.css("left", "0px");
    }, 50);

    setTimeout(after, 850);
}

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" });

    setTimeout(function() {
        current.css("left", endX + "px");
        page.css("left", "0px");
    }, 50);

    setTimeout(after, 850);
}

1 Ответ

1 голос
/ 06 сентября 2011

Теперь я хочу, чтобы вы написали мне некоторый код, чтобы понять, как я могу применить перемещение DIV вдоль оси x, как показано только одно?

Это ответ, почему выПоследний вопрос не получил ответа!

Вы не можете просто ожидать, что ваш код будет написан здесь.Может быть, покажите нам, что вы уже пробовали, мы можем показать, где вы ошиблись.Люди здесь не для того, чтобы делать вашу работу за вас.

...