javascript - jQuery 发起的 CSS 转换在重复触发时出现故障

Question

我试图在按下按钮时快速淡入淡出元素。这是 jQuery 和 CSS 代码:

$('#button').on("click", function () {
    $('.alert_itemadded').show(0, function() {
        $('.alert_itemadded').toggleClass('alert_itemadded_fade');
        $('.alert_itemadded').one('transitionend webkitTransitionEnd', function() {
            setTimeout(function() {
                $('.alert_itemadded').toggleClass('alert_itemadded_fade');
                $('.alert_itemadded').one('transitionend webkitTransitionEnd', function() {
                    $('.alert_itemadded').hide();
                });
            }, 300);
        });
    });
});

.alert_itemadded {
    display: none;
    opacity: 0;
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    width: 50px;
    height: 50px;
    background-color: red;
}
.alert_itemadded_fade {
    opacity: 1;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

代码工作正常，除非您在淡入/淡出过渡序列完成之前单击按钮。如果在过渡期间单击，“alert_itemadded”元素仍会正确淡入，但随后会立即隐藏而不会正确淡出。知道如何解决这个问题吗？

我尝试过但没有成功的事情:

• 使用 addClass 和 removeClass 而不是 toggleClass。
• 在按钮单击事件之后立即添加 $('.alert_itemadded').finish() 以终止当前正在运行的转换。

任何帮助将不胜感激。提前谢谢你。

Answer 1

您可以禁用该按钮并在转换结束后再次启用它。像这样:

$('#button').on("click", function () {
    var button =  $(this);
    button .attr('disabled', 'true');
    $('.alert_itemadded').show(0, function() {
        $('.alert_itemadded').toggleClass('alert_itemadded_fade');
        $('.alert_itemadded').one('transitionend webkitTransitionEnd', function() {
            setTimeout(function() {
                $('.alert_itemadded').toggleClass('alert_itemadded_fade');
                $('.alert_itemadded').one('transitionend webkitTransitionEnd', function() {
                    $('.alert_itemadded').hide();
                });
                button .attr('disabled', 'false');
            }, 300);
        });
    });
});