jQuery - 检测 CSS 动画是否结束

jQuery -detecting if CSS animation ended

本文关键字：是否 结束 动画 CSS 检测 jQuery      更新时间：2023-09-26

只是引导一个快速的模态脚本，我就碰壁了。

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

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

瞬间被发射...当我每次尝试单击不同的链接时，它都可以正常工作。我确实尝试modalBg变量为 null，它可以解决问题，但控制台返回未定义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);
     });
   });
});

将 off（e） 替换为

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

相关文章：