Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

positioning issue with translate3d per javascript, jquery

positioning issue with translate3d per javascript, jquery

Problem

im working on a little project of mine and noticed a wiered problem.

Here is the fiddle.

If you refresh the fiddle and go to the page "list" and then to "Angebot" you will notice, that the "old page" slides down correctly but the new page slides up instead of down. In my javascript i position the new page correctly right before the animation. somehow the positioning is not performed before the animation.

And here is the positioning part:

if ((activePage.index() + 1) > newPageIndex) {

    move = pageSize;

} else {

    move = -pageSize;
}

newActivePage.css({
    "-webkit-transition-duration": "0",
    "-webkit-transform": "translate3d(0, " + -move + "px, 0)",
    "-moz-transition-duration": "0",
    "-moz-transform": "translate3d(0, " + -move + "px, 0)",
    "transition-duration": "0",
    "transform": "translate3d(0, " + -move + "px, 0)"
});

activePage.css({
    "-webkit-transition-duration": "0.4s",
    "-webkit-transform": "translate3d(0, " + move + "px, 0)",
    "-moz-transition-duration": "0.4s",
    "-moz-transform": "translate3d(0, " + move + "px, 0)",
    "transition-duration": "0.4s",
    "transform": "translate3d(0, " + move + "px, 0)"
}).removeClass("page-active");

newActivePage.css({
    "-webkit-transition-duration": "0.4s",
    "-webkit-transform": "translate3d(0, 0, 0)",
    "-moz-transition-duration": "0.4s",
    "-moz-transform": "translate3d(0, 0, 0)",
    "transition-duration": "0.4s",
    "transform": "translate3d(0, 0, 0)"
}).addClass("page-active");

the newActivePage should be positioned on top of the activePage or below depending on the move variable. after that it should be animated accordingly. as i said, for some reason the positioning does not happen before the animation.

Maybe someone knows a solution or workaround.

Thanks in advance arkhon

EDIT:

unfortunatily the offSetWidth fix only works in chrome but not in firefox. So maybe someone has any additional ideas?

Problem courtesy of: arkhon

Solution

You need to force the page to render the first set of style for the new page, using newActivePage[0].offsetWidth;

You function looks like this,

function slidePage(pageSize, newPageIndex, animSpd) {
    var activePage = $(".page-active");
    var newActivePage = $(".pages-wrapper").children(":nth-child(" + newPageIndex + ")");
    var move;

    if ((activePage.index() + 1) > newPageIndex) {

        move = pageSize;

    } else {

        move =- pageSize;
    }

    newActivePage.css({
        "-webkit-transition-duration": "0",
        "-webkit-transform": "translate3d(0, " + -move + "px, 0)",
        "-moz-transition-duration": "0",
        "-moz-transform": "translate3d(0, " + -move + "px, 0)",
        "transition-duration": "0",
        "transform": "translate3d(0, " + -move + "px, 0)"
    });
    newActivePage[0].offsetWidth;
    activePage.css({
        "-webkit-transition-duration": "0.4s",
        "-webkit-transform": "translate3d(0, " + move + "px, 0)",
        "-moz-transition-duration": "0.4s",
        "-moz-transform": "translate3d(0, " + move + "px, 0)",
        "transition-duration": "0.4s",
        "transform": "translate3d(0, " + move + "px, 0)"
    }).removeClass("page-active");

    newActivePage.css({
        "-webkit-transition-duration": "0.4s",
        "-webkit-transform": "translate3d(0, 0, 0)",
        "-moz-transition-duration": "0.4s",
        "-moz-transform": "translate3d(0, 0, 0)",
        "transition-duration": "0.4s",
        "transform": "translate3d(0, 0, 0)"
    }).addClass("page-active");

}

Check this http://jsfiddle.net/L4Txr/4/. Its working fine now.

Solution courtesy of: Ashis Kumar

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

positioning issue with translate3d per javascript, jquery

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×