jQuery檢測如果CSS動畫結束

只是引導一個快速模態腳本，我打了牆。jQuery檢測如果CSS動畫結束

測試CSS動畫和一切正常。我可以從一個鏈接打開一個模式，但是當我嘗試後直再次打開同一模式由於某些原因

.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
    function(e){ 
     modalBg.removeClass('flex fadeOut animated'); 
     $(this).off(e); 

    });

被解僱瞬間......當我嘗試每天正常工作時間點擊不同鏈接。我確實試圖清空modalBg變量，它的確有竅門，但是控制檯返回了未定義removeClass的錯誤。所以由於某種原因，modalBg.removeClass('flex fadeOut animated');仍然被解僱。

這裏是JSBin

這裏是整個代碼：

$(document).ready(function() { 

$(".modal-link").on("click", function() { 

     attribute = $(this).attr('href'); 
     attribute = attribute.replace('#',''); 
     console.log(attribute); 

     $('.modal-bg[data-modal='+ attribute +']').addClass("flex animated fadeIn"); 
     $('.modal-bg[data-modal='+ attribute +'] .modal').addClass("animated fadeInDown"); 
}); 

$('.modal-close').on('click', function() { 
    modalBg = $(this).closest('.modal-bg'); 
    modalBg.removeClass('fadeIn'); 
    modalBg.addClass('fadeOut'); 
    modalBg.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
    function(e){ 
     modalBg.removeClass('flex fadeOut animated'); 
     $(this).off(e); 

    }); 
    }); 
});

來源

2016-03-05 CyberFountain

我覺得更換你關閉（E）像你需要使用jQuery的動畫功能利用完成的動畫處理器。 – Mistergreen

@Mistergreen，這不是一個問題，它與關鍵幀CSS動畫工作正常。我無法弄清楚爲什麼事件被觸發，當我點擊相同的鏈接兩次...有趣的是，當我點擊鏈接第三次它再次工作:)我不希望使用jQuery動畫，他們很慢的恢復CSS。 – CyberFountain

與

$(this).off("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd");

來源

2016-03-05 18:11:04 Mistergreen

很好@Mistergreen現在工作正常，非常感謝:) – CyberFountain

jQuery檢測如果CSS動畫結束

回答

相關問題