微信小程序iOS端如何暂停animated动画

在知道有animation-play-state这个animation的参数时，我内心是激动的。在得知iOS端并不支持时，一股凉意袭来

animation-play-state

先来介绍一下今天的主角animation-play-state

animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

在MDN文档中了解到，这是一个实验中的功能，但是其作用还是强大的。既可以控制/获取元素的动画状态（paused，running）

所以，这个animation的参数用来控制动画的播放状态再合适不过了。画外音：你还没考虑兼容性呢！对！就是这个兼容性问题。在chrome上这个参数是可以支持的，但是iOS设备上就不支持了...叹息。

在iOS上的处理

当然不能因为兼容性问题就不用这个参数了，当然不能让每个iOS用户去下载一个chrome浏览器，当然...

那我们怎么解决呢？？？用JS

通过Window.getComputedStyle()方法，我们可以获取元素实时的style的CSSStyleDeclaration对象，这个对象表示CSS属性键值对的集合。也就是说我们使用这个方法可以获取一个正在进行动画的元素当前的style值。

PS:关于Window.getComputedStyle()方法的值可以在MDN上了解到，这里不展开叙述。给出一个语法的例子（摘自MDN）

let style = window.getComputedStyle(element, [pseudoElt]);

那么具体要怎么做呢？

实现

See the Pen animation-play-state by luogao (@luogao) on CodePen.

代码已经在上面的codepen预览中展示啦，如果现实不来请点这里