时间戳

首页 > 解决方案 > 使用 animate.css 在第一个动画后 6 秒重复相同的动画 [已编辑]

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

问题描述

我想在 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);

标签： javascriptanimate.css

解决方案

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

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

推荐阅读