帶動畫的jQuery的addClass removeClass

Question

在下面查看我的答案

我正在使用jQuery使用CSS實現我自己的滑動頁面過渡，並且遇到以下問題：

我正在使用addClass方法，它在第一次觸發鏈接以將頁面動態加載到div中時起作用。 當另一個鏈接被觸發時，頁面加載而沒有過渡。 我認為這是我需要使用removeClass方法，但這可以防止根本不觸發轉換。 我嘗試了使用這兩個類的各種方法，但是每次鏈接出現問題時，我都無法使它正常工作。

對我的錯/遺漏有任何想法嗎？

編輯對於那些不懂CSS子類的人：

一次可以將多個類（以空格分隔）添加到一組匹配的元素中，如下所示：

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

取自jQuery Docs

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

Answer 1

我想到了：

將.addClass('slide out')方法與webkitAnimationEnd事件webkitAnimationEnd ，后跟return語句，當第一個轉換完成時，將觸發第二個轉換。 觸發此事件時，它將從原始頁面中刪除所有類。 記住取消綁定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');
        });
    });
};

Answer 2

CSS類不應包含任何空格...

即：

滑出，應該滑出，還是slide_out或slideOut

嘗試刪除空格並固定css中的類以使其匹配。