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

Posted 2021-05-04

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

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

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

使用javascript，我可以在6秒后将setTimeout激活，删除摇动动画，然后将振动类添加回元素，问题就在这里，虽然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);

答案

由于缺乏适当的词汇，我将解释如下：

这被视为单个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);