How do I do mobile animation perfectly?

2019-09-20 19:15发布

问题:

As you can see my last post didn't attract the community but I managed to get that animation on iPhone working via CSS3 transitions pretty great.

I normalized my code to use CSS3 animations now. This is little better than what I saw using JavaScript. But still the animation lags on the device. I have many DIVs inside <body> and only one at a time would be visible and all other are hidden.

If you look at this picture, these are 4 DIVs but the second DIV is being currently shown on the device. Now I want you to please write me some code to understand how can I apply movement of DIVs along x-axis as only one would be shown?

UPDATED

The code I have right now is...

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:

Now I want you to please write me some code to understand how can I apply movement of DIVs along x-axis as only one would be shown?

This answers why you're last question didn't get answered!

You can't just expect your code to be wrote on here. Maybe show us what you already have tried, we can show where you went wrong. People aren't here to do your job for you.