jQuery - 禁用按钮单击直到 css 动画结束

Question

我正在尝试禁用按钮，直到 CSS 动画结束。

负责触发点击事件的代码:

$($controls__right).on('click', function () {
    replace_images();
    direction = 1;
    reload_content(direction);
});

使图像具有动画效果的函数。在这部分代码未执行之前，按钮应禁用，执行后启用。

function replace_images() {
    $current__images = $('.device__screen');
    $current__texts = $('.text-area');
    $($current__images[0].children[0]).css({
        '-webkit-animation': 'scroll_down 1s',
        '-moz-animation': 'scroll_down 1s',
        '-ms-animation': 'scroll_down 1s',
        '-o-animation': 'scroll_down 1s',
        'animation': 'scroll_down 1s'
    });
    setTimeout(function () {
        $($current__images[0].children[0]).remove();
    }, 1000);

    $($current__texts[0].children[0]).remove();
}

Answer 1

尝试在此上下文中使用 animationend 事件，

$element.on('animationend webkitAnimationEnd oanimationend', function () {
    // enable or disable whatever buttons you want
});

其中 $element 将由 CSS 动画进行动画处理。