每个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之上或以下，具体取决于move变量。 之后应该相应地制作动画。 正如我所说，由于某种原因，定位不会发生在动画之前。

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

在此先感谢arkhon

编辑：

不幸的是，offSetWidth修复仅适用于chrome，但不适用于firefox。 那么也许有人有任何额外的想法？

Answer 1

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

你的function看起来像这样，

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