我想在 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);
最佳答案
由于缺乏适当的词汇,我将这样解释:
这被视为单个 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);
关于javascript - 使用 animate.css [已编辑] 在第一个动画之后重复相同的动画 6s,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55800047/