根据javascript、jquery和translate3d定位问题

我在做我的一个小项目，发现了一个棘手的问题

这是你的电话号码

如果您刷新小提琴并转到页面“列表”，然后转到“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的顶部或下方。之后，应相应地设置动画。正如我所说的，由于某些原因，定位不会在动画之前发生

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

提前谢谢 阿尔康

编辑：

不幸的是，offSetWidth修复程序仅在chrome中有效，而在firefox中无效。

---

因此，可能有人有其他想法？

您需要使用

newActivePage[0]强制页面呈现新页面的第一组样式

你的函数看起来像这样

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

}

看看这个。现在工作正常。
您需要使用
newActivePage[0]强制页面呈现新页面的第一组样式

你的函数看起来像这样

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

}

看看这个。现在工作正常。
您正在使用哪个版本的firefox。它在我的firefox版本23.0.1上非常有效，您使用的是哪个版本的firefox。它在我的firefox版本23.0上运行得非常好。1@arkhon我能知道firefox的哪个版本不起作用吗？当然可以。我也使用23.0.1。Firefox显示出了非常古怪的行为。小提琴适用于最初的几次链接点击。在一些随机点击后，模具定位再次关闭。用小提琴和当地人确认了这一点。Chrome、IE10、移动Chrome、Android股票浏览器和移动Firefox都能正常工作。@arkhon我能知道哪个版本的Firefox不能工作吗？当然可以。我也使用23.0.1。Firefox显示出了非常古怪的行为。小提琴适用于最初的几次链接点击。在一些随机点击后，模具定位再次关闭。用小提琴和当地人确认了这一点。Chrome、IE10、移动Chrome、Android股票浏览器和移动Firefox都能很好地工作。