Question

只需启动一个快速模式脚本，我就会碰壁。

测试css动画，一切正常。我可以从一个链接打开一个模态，但是当我因某种原因尝试再次打开相同的模态时

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

     });

立即被触发...当我每次尝试点击不同的链接时，它正常工作。我确实尝试了null 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);

     });
   });
});

Answer 1

用

替换你的关闭（e）

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

jQuery - 检测CSS动画是否结束

1 个答案: