jquery 在按钮单击后重新启动动画

Question

我有几行 Jquery:

$(document).on('click', '#clicked', function(e){
    e.preventDefault();
    $(".speech").css("animation-play-state", "running");
});

// Change text on click and reset animation
// 
$(document).on('click', '#clicked2', function(e){
    e.preventDefault();
    $('.speech').each(function() {
        var text = $(this).text();
        $(this).text(text.replace('I AM A WOOKIE!!', 'YOU CLICKED!')); 
    });
    setTimeout(function(){
        var redo= $('.speech');
        $("." + redo.attr(".speech") + ":last").remove();  
        // $(".speech").remove();  
        $(".speech").css("animation-play-state", "paused");
    }, 2000);
});

到目前为止，它的工作原理是当您单击#clicked 时播放动画。

然后单击#clicked2，然后更改字符串 I AM A WOOKIE!!你点击了!

然后我试图实现的是在超时功能之后它会重置回原始动画的开始。所以基本上是一个重置按钮，但我不确定如何到达那里。

有问题的行是:

setTimeout(function(){
    var redo= $('.speech');
    $("." + redo.attr(".speech") + ":last").remove();  
    // $(".speech").remove();  
    $(".speech").css("animation-play-state", "paused");
}, 2000);

其他一切正常。我只是不确定重置动画的正确语法，所以当您再次单击#clicked 时，它基本上是从头开始

https://jsfiddle.net/uLg99tsw/8/

Answer 1

您正在使用animation-play-state。为什么不使用 transitions？看看this只需在点击按钮时将您的过渡 CSS 类添加/删除到您的标记中。