如何让JavaScript触发的CSS动画支持按钮多次点击运行？

问题出在：第一次点击给元素添加了logo-animate类，动画执行完毕后这个类依然保留在元素上。CSS动画只会在类首次添加到元素时触发，后续重复添加同一个类不会重新执行动画。

下面提供两种可行的修改方案：

方案一：点击时强制重置动画类 #

利用浏览器重绘机制，先移除动画类，再触发重绘后重新添加类，确保每次点击都能启动新的动画循环。修改后的JavaScript代码：

document.getElementById('LogoContainer').addEventListener('click', function() {
    var c = document.getElementsByClassName('logo-rec');
    for (var i = 0; i < c.length; i++) {
        // 先移除动画类
        c[i].classList.remove('logo-animate');
        // 读取元素属性强制浏览器重绘，避免同步操作不生效
        void c[i].offsetWidth;
        // 重新添加动画类，触发动画
        c[i].classList.add('logo-animate');
    }
})

方案二：动画结束后自动移除类 #

给元素绑定动画结束事件，动画执行完成后自动移除logo-animate类，下次点击时元素无此类，添加后即可重新触发动画。修改后的JavaScript代码：

// 提前绑定动画结束事件
var c = document.getElementsByClassName('logo-rec');
for (var i = 0; i < c.length; i++) {
    c[i].addEventListener('animationend', function() {
        this.classList.remove('logo-animate');
    });
}

// 点击按钮触发动画
document.getElementById('LogoContainer').addEventListener('click', function() {
    var c = document.getElementsByClassName('logo-rec');
    for (var i = 0; i < c.length; i++) {
        c[i].classList.add('logo-animate');
    }
})

方案对比 #

• 方案一：不管上一次动画是否完成，点击就强制重启动画，适合需要即时响应点击的场景；
• 方案二：遵循动画自然流程，只有上一次动画结束后，下次点击才会启动新动画，避免动画叠加混乱。

你的HTML和CSS代码无需修改，任选一种方案替换原有JavaScript代码即可实现重复点击触发动画的效果。

内容的提问来源于stack exchange，提问作者MC Squared