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动画制作动画。

Answer 2

如何使用callbacks：

function replace_images() {
    $("#button").prop('disabled', true); //disable

    $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(function() {
            $("#button").prop('disabled', false) //enable
        });
    );
    }, 1000);

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

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

2 个答案: