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

Question

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

这是我目前试过的代码。

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

使用JavaScript，我可以setTimeout在6秒后触发，移除摇动动画，然后将摇动class添加回元素，问题就在这里，虽然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 更新中添加和删除相同的 class，并且看起来好像没有任何变化。

添加第二个 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);

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

Repeating the same animation 6s after first one using animate.css [Edited]

javascript

animate.css