javascript - 使用 animate.css [已编辑] 在第一个动画之后重复相同的动画 6s

Question

我想在 6 秒后使用 animate.css 重复摇动动画一次。

这是我到目前为止尝试过的代码。

动画的第一部分效果很好，但第二部分。它只是没有。

使用JavaScript，我可以setTimeout在6秒后触发，删除摇动动画，然后将摇动类添加回元素，问题就在这里，虽然setTimeout触发，但第二个摇动动画没有出现(动画预计在 6 秒后出现)

// First Part: Adding animation to the object 

    document.querySelectorAll(".profile")[userA_Index].classList.add('animated', 'shake', 'slow', 'delay-1s')


//Second Part: Now I remove the first shake animation and add the second one after 6 seconds, But unexpectedly the animation here doesn't work...

    setTimeout(function(){ 
    document.querySelectorAll(".profile")[userA_Index].classList.remove('animated', 'shake')
    document.querySelectorAll(".profile")[userA_Index].classList.add('animated', 'shake', 'slow', 'delay-1s')
    }, 6000);

Answer 1

由于缺乏适当的词汇，我将这样解释:

这被视为单个 DOM 修改，因为您在同一个 DOM 更新中添加和删除同一个类，看起来好像没有任何变化。

添加第二个 setTimeout，在第一次发生后推送单独的 DOm 更新:

setTimeout(function(){ 
    document.querySelectorAll(".profile")[userA_Index].classList.remove('animated', 'shake');
    setTimeout(function(){
        document.querySelectorAll(".profile")[userA_Index].classList.add('animated', 'shake', 'slow', 'delay-1s')
    }, 16); // can work for 0 also, but i usually like to leave a frame in between
}, 6000);