jQueryを使用してCSSで独自のスライドページ遷移を実装していますが、次の問題があります:
私は addClass メソッドを使用しています。これは、リンクが初めて起動されて、ページを div に動的にロードするときに機能します。別のリンクが起動されると、遷移なしでページが読み込まれます。removeClass メソッドを使用する必要があると考えましたが、これによりトランジションがまったく起動しなくなります。私は 2 つのクラスを使用するさまざまな方法を試しましたが、リンクが発生するたびに機能させることはできません。
私が間違っている/欠けているものについて何か考えはありますか?
EDIT CSSサブクラスを理解していない人のために:
次のように、一度に複数のクラスをスペースで区切って、一致する要素のセットに追加できます。
$("p").addClass("myClass yourClass");
thnx。
/* --------------- Handle Page Body Loading ----------------- */
function loadBody(target, gotoURL)
{
$('#' + target)
.addClass('slide out')
.load(gotoURL, function (response)
{
iniScroll('scrollBody', 'bodyScrollContainer');
})
.addClass('slide in')
removeSlideClass();//WITHOUT THIS, IT FIRES ONLY THE FIRST USE!!
};
function removeSlideClass()
{
$('#bodyContent').removeClass('slide in');
$('#bodyContent').removeClass('slide out');
};
以下のようにコードを記述した場合、まったく同じように機能します(jQuery 101)。
function loadBody(target, gotoURL)
{
$('#' + target).addClass('slide out');
$('#' + target).load(gotoURL, function (response)
{
iniScroll('scrollBody', 'bodyScrollContainer');
});
$('#' + target).addClass('slide in');
$('#' + target).removeSlideClass();
};
function removeSlideClass()
{
$('#bodyContent').removeClass('slide in');
$('#bodyContent').removeClass('slide out');
};
CSS:
.out, .in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 650ms;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
}
.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
}