2

以下の私の答えを見てください

jQueryを使用してCSSで独自のスライドページ遷移を実装していますが、次の問題があります:

私は addClass メソッドを使用しています。これは、リンクが初めて起動されて、ページを div に動的にロードするときに機能します。別のリンクが起動されると、遷移なしでページが読み込まれます。removeClass メソッドを使用する必要があると考えましたが、これによりトランジションがまったく起動しなくなります。私は 2 つのクラスを使用するさまざまな方法を試しましたが、リンクが発生するたびに機能させることはできません。

私が間違っている/欠けているものについて何か考えはありますか?

EDIT CSSサブクラスを理解していない人のために：

次のように、一度に複数のクラスをスペースで区切って、一致する要素のセットに追加できます。

$("p").addClass("myClass yourClass");

jQuery ドキュメントから取得

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;
}
4

2 に答える 2

0

私はそれを考え出した：

.addClass('slide out')メソッドをevent にバインドwebkitAnimationEndし、return ステートメントを続けると、最初のトランジションが完了したときに 2 番目のトランジションが発生します。このイベントが発生すると、元のページからすべてのクラスが削除されます。イベントのバインドを解除することを覚えておくとwebkitAnimationEnd、新しいページに余分なハンドラーが追加されるのを防ぐことができるため、必要なときにプロセスを再開できます。したがって、jQuery のremoveClass()メソッドは必要ありません。

新しいページ遷移方法。

/* --------------- Handle Page Body Loading ----------------- */

function loadBody(target, gotoURL)
{
    $('#' + target)
    .addClass('slide out')
    .bind('webkitAnimationEnd', function(){
        $(this).load(gotoURL, function (e)
        {
            iniScroll('scrollBody', 'bodyScrollContainer');
            $('#' + target)
            .toggleClass('slide in')
            .unbind('webkitAnimationEnd');
        });
    });
};
于 2012-04-26T15:54:36.080 に答える
-1

CSS クラスにスペースを含めないでください...

すなわち:

スライドアウト、スライドアウト、またはslide_outまたはslideOutである必要があります

スペースを削除し、css のクラスを Match に修正してみてください。

于 2012-04-26T01:26:44.497 に答える