每个javascript，jquery的translate3d定位问题

Question

我正在处理我的一个小项目，并注意到一个奇怪的问题。

这里是fiddle。

如果您刷新小提琴并转到页面 "list" 然后转到 "Angebot" 您会注意到，“旧页面”正确地向下滑动但新页面向上滑动而不是向下滑动。在我的 javascript 中，我在动画之前正确定位了新页面。不知何故，在动画之前没有执行定位。

这里是定位部分：

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

newActivePage 应位于 activePage 之上或之下，具体取决于 move 变量。之后，它应该相应地进行动画处理。正如我所说，由于某种原因，定位不会在动画之前发生。

也许有人知道解决方案或解决方法。

提前致谢 阿洪

编辑：

不幸的是，offSetWidth 修复仅适用于 chrome，但不适用于 Firefox。 那么也许有人还有其他想法？

Answer 1

您需要强制页面为新页面呈现第一组样式，使用newActivePage[0].offsetWidth;

你的函数看起来像这样，

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

}

检查此http://jsfiddle.net/L4Txr/4/。它现在工作正常。