Question

我在我的一个小项目上工作并注意到了一个问题。

这是fiddle。

如果您刷新小提琴并转到页面“列表”然后转到“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变量。之后应该相应地制作动画。正如我所说，由于某种原因，定位不会发生在动画之前。

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

提前致谢 arkhon

编辑：

不幸的是，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/。它的工作正常。

每个javascript，jquery的translate3d定位问题

1 个答案: