定位问题与translate3d每个javascript，jquery [英] positioning issue with translate3d per javascript, jquery

问题描述

这里是小提琴。

如果您刷新小提琴并转到页面然后到Angebot，您会注意到旧页面向下滑动，但新页面向上滑动，而不是向下滑动。在我的javascript我在动画之前正确的位置新的页面。

这里是定位部分：

  if（（activePage.index（）+ 1）> newPageIndex）{
 
 move = pageSize; 
 
} else {
 
 move = -pageSize; 
} 
 
 newActivePage.css（{
-webkit-transition-duration：0，
-webkit-transform：translate3d ，+ -move +px，0），
-moz-transition-duration：0，
-moz-transform：translate3d +px，0），
transition-duration：0，
transform：translate3d（0，+ -move +px，0） }）; 
 
 activePage.css（{
-webkit-transition-duration：0.4s，
-webkit-transform：translate3d +px，0），
-moz-transition-duration：0.4s，
-moz-transform：translate3d（0，+ move + ），
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。
所以也许有人有任何其他想法？

解决方案

您需要强制页面呈现第一组样式对于新页面，使用 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 ，+ -move +px，0），
-moz-transition-duration：0，
-moz-transform：translate3d +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 + 0），
-moz-transition-duration：0.4s，
-moz-transform：translate3d（0，+ move +px，0） b $ btransition-duration：0.4s，
transform：translate3d（0，+ move +px，0）
}）removeClass ）; 
 
 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/ 。它现在工作罚款。

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?

解决方案

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.

这篇关于定位问题与translate3d每个javascript，jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！