孤陋寡闻了，才知道已经可以用 JS 来控制 CSS 动画了

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 22 天，点击查看活动详情

最近翻 MDN 突然发现一套叫 Web Animations API 的东东，点进去看才知道，原来是一套控制 css animation 的 API ，而且已经有段时间了 🤦‍♂️，而我居然一直不知道。

Web Animations API 主要包含两个 API ： animate 来执行动画， getAnimations 来获取当前元素的动画。

并且 getAnimations 不止可以获取到 animate 创建的动画， css 中的动画同样可以获取到。

getAnimations

先来个小 Demo ：

code.juejin.cn/pen/7132756…

如上 Demo 所示，通过 getAnimations 我们可以获取到当前元素的正在运行的动画的 Animate 对象，如果传入参数 {subtree: true} 还能获取到包括其所有子元素、伪元素的动画。

通过拿到的 animate ，我们可以直接对其进行各种操作，如：


      pause

- 暂停动画


      play

- 播放动画


      cancel

- 取消动画状态


      reverse

- 反向执行动画到开始状态


      finish

- 直接跳到动画结束阶段

此外还有一些其他比较少用的方法，如 commitStyles 、 persist 等。

通过上述 API ，我们可以轻易的通过 JS 来控制动画的执行，而不需要像以前一样通过改写 CSS 样式来控制。

除了上述的一些操作方法外， animate 中还有很多动画的属性，包括运行状态的 Promise 、 timeline 、 effect 等。

其中如 finished 等 Promise 在动画控制时也很好用，比如创建一个动画后需要在动画完成后做一些处理直接 await finished 即可，不需要像以前一样监听 dom 状态或是设定倒计时。

其它需要了解的可以点击这里查看。

animate

animate 方法则可通过 JS 给元素添加动画： Element.animate(keyframes, options)

anim.animate(
    [{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }, { transform: 'translateX(0)' }],
这里的 keyframes 是一个数组，不同于 css keyframes，这里不需要定义每一个关键帧的百分比，此处会默认按照等比拆分关键帧，如果需要定义百分比，可直接在关键帧中添加 offset 参数：
anim.animate(
    [{ transform: 'translateX(0)' }, { transform: 'translateX(100px)', offset: 0.3 }, { transform: 'translateX(0)' }],
此处 keyframe 参数主要包含两种属性，第一种是对应的 css 属性的 js 表示，如 left、paddingLeft、transform 等（注意此处 css 中的 float、offset 需要写成 cssFloat、cssOffset），第二种是上面说到的 offset 一类的通用控制参数，除了 offset 外，还可设置 easing 为每个关键帧设定动画曲线：
anim.animate([{ opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 }], 1000);
以及 composite 参数来控制动画合成方式。
此外，keyframes 还支持第二种格式：
anim.animate(
        opacity: [0, 0.9, 1],
        offset: [0, 0.8], // Shorthand for [ 0, 0.8, 1 ]
        easing: ['ease-in', 'ease-out']
可直接传入一个对象，将对象中的属性通过数组表示来表示对应的关键帧。
options 则可以直接传入数字，代表动画事件或是传入动画参数：
anim.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }, { transform: 'translateX(0)' }], {
    duration: 1000
参数和 CSS 中差不多，包括：
delay - 动画延迟
direction - 动画运行方向
duration - 动画运行时间
easing - 动画运行曲线
endDelay - 动画结束后的延迟
fill - 动画完成后的填充
iterations - 动画重复次数
composite - 动画合成
此外还有 iterationStart、iterationComposite，需要了解可点击查看。
兼容和 polyfill
当然，该系列 API 兼容并不佳，要能够完整体验需要至少 chrome 84 以上版本，IE 则完全没戏。
不过还好有 polyfill 的存在：web-animations-js
通过 Web Animations 系列 API 可以方便的控制已有的 CSS 动画、添加动画等，而不需要像以前一样使用 JS 来模拟动画，在某些特定场景下可以提高动画性能、简化动画代码。
都到看这了真不打算不点个赞吗 🐶