Question

正如您所看到的，我的上一个 post 没有吸引社区，但我设法通过CSS3过渡在iPhone上运行该动画非常棒。

我将代码规范化为现在使用CSS3动画。这比我用JavaScript看到的要好一些。但动画仍落后于设备。我在<body>内有很多DIV，一次只能看到一个，而其他所有都是隐藏的。

如果你看这张图片，这些是4个DIV，但第二个DIV当前正在设备上显示。现在我想请你给我写一些代码来了解如何沿着x轴应用DIV的运动，因为只有一个会被显示出来？

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

Answer 1

现在我想请你写一些代码来了解我该怎么做应用DIV沿x轴的移动，只显示一个？

这就解答了为什么你的最后一个问题没有得到解答！

您不能只希望在此处编写代码。也许告诉我们你已经尝试过的东西，我们可以告诉你哪里出错了。人们不是来为你做你的工作。

如何完美地制作手机动画？

1 个答案: