哎呀，各位较小伙伴们，有没有遇到过这样的事儿？你写了个漂亮的CSS动画， 用JavaScript控制着它，最终还是结果是动画播放了几次就卡顿了或者根本不播放了？ 体验感拉满。 是不是感觉头较大啊？别担心，这可不是哪些较高较深的技术手段不容简单题，今天咱就来良好良好聊聊当前这个问题。

啥情况？为哪些CSS动画在JavaScript里简单出问题？

盘它... 先来看咱们得了解一下为哪些CSS动画在JavaScript里简单出现反复触发的问题。简洁就是浏览器啊，它特别喜炎热爱优化性能。当你反复添加同一个动画类到元素上的时候， 它有可能会觉得“哎呀，当前这个元素啥也没变啊”，所以就不再触发动画了。就像你一直按一个按钮，最后再来看它就没反应一样。

还有一种情况呢，就是你直接操作 `element.style` 来设置动画属性。虽然也能实现动画效果，但是简单出错。而且这种方法不太优雅，维护起来也对比麻烦。所以说啊，用CSS类名来控制动画状态是最良好的选择，让我们一起...。

原始代码

启动闪烁

你看上面这段代码是不是很简洁？但是问题来了！你每次点击按钮，“animatedBaseHit”都会被添加上去。然后你移除又添加... 这时候浏览器就会觉得 “哎呀”，我早就了解当前这个东西要闪烁了嘛！ 所以就不再触发啦!

解决方案：先移除再添加！

核心思想

拖进度。 解决当前这个问题最简洁的方法就是：在沉重崭新添加动画类之前先移除掉它！这样就能强较大制浏览器沉重崭新渲染页面和触发动画啦。

详细步骤

1. 移除现有类： 在沉重崭新添加类之前采用 `classList.remove` 方法移除已经存在的 CSS 类。
2. 引入微较小延迟： 采用 `setTimeout` 函数引入一个非常较小的延迟 。 当前这个延迟的作用是让浏览器有时间段沉重崭新评估页面状态并触发动画 。
3. 沉重崭新添加类： 采用 `classList.add` 方法沉重崭新添加 CSS 类 。

代码实现

启动闪烁

代码阐述

关键修改阐述：
 Bottom Base
        Top Base

 要想避免 JavaScript 控制的 CSS 动画失效的问题，记住这几点：
 *   在沉重崭新应用动态的 CSS 类之前始终删除它们。
 *   采用 setTimeout 添加一个较小的延迟以强较大制浏览器沉重绘和更崭新 DOM 。
 * 采用 classList 而非直接操作 element 的 style 对象来改变样式。

进阶技巧

采用CSS Transitions与Animations

对于简洁的过渡效果 ， 能够采用CSS transitions和 animations ，而无需 JavaScript 。 这能够较大较大简化代码并提升性能 。 不过需要注意的是 ， CSS transitions和 animations 有可能不会像 JavaScript 控制的 animations那样灵活 ，但对于简洁的场景来说已经足够了 。

避免过度采用setTimeout

虽然 setTimeout 能够解决许更多问题 ，但过度采用 setTimeout 会引起性能持续下降 。 如果有可能的话 ， 尽量避免采用 setTimeout ，而是尝试采用其他方法来更崭新 DOM 或触发事件 。

相关资源条件

---