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

代码工作正常，除非您在 fadein/out 转换序列完成之前单击按钮。如果在过渡期间单击，"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);
        });
    });
});

Answer 2

不幸的是，我仍然无法弄清楚如何获得我想要的效果（之前的过渡完全停止，而新的过渡又像正常一样重新开始）。我最后只是简单地添加了一个 T/F 变量，它指示转换是否正在进行中。如果是，我忽略了正常的按钮点击代码。

希望此变通方法对其他人有所帮助。如果我最终弄清楚如何以正确的方式重新启动此转换，我将 post 此处的解决方案。

jQuery 已启动 CSS 转换在重复触发时出现故障

jQuery initiated CSS transition glitching out when triggered repeatedly

javascript

css

jquery

transition