私の小さなプロジェクトに取り組んでいて、厄介な問題に気づきました。
これがフィドルです。
フィドルを更新してページ「リスト」に移動してから「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 では機能しません。それで、誰かが追加のアイデアを持っているかもしれませんか？