在晓得有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预览中展现啦，假如实际不来请点这里👉Roy Luo’s codepen
大抵解释一下就是：
在元素的外层的包裹元素上增加猎取到的实行动画的元素的style盘算属性，从而让实行动画的元素停息下来。
那末在微信小顺序中又是怎样呢？
实在，最早碰到这个题目是在做小顺序的时刻。一个播放器的界面，中心一张专辑图片。在圆形的黑胶唱片边框中扭转。当播放住手，图片也同时住手扭转。停在当前扭转的位置
当时看似简朴的一个需求，运用了animation-play-state而且与预期一样达到了结果，在模拟器中。
没错，意气扬扬的认为完成了需求，结果然机（iOS）上一测试，暴露无遗。
当时看到小顺序的官方社区中提到说iOS不支撑这个animation-play-state🤦♂️🤦♂️🤦♂️🤦
幸得残阳映枫红在sf的一个题目中的回复让我找到了方向。谢谢之～
值得在末了前一提的是
这里有三个小顺序的坑要提一下
- nodesRef.fields(fields, [callback])这个要领需要在基础库2.1.0（个人感觉不是个该着重斟酌的题目）
- 这个要领是异步的（自行感觉）
- 应当辨别iOS和安卓装备，举行差别的处置惩罚。能不必这个nodesRef.fields要领只管不要用～
参考
本文作者： Roy Luo
本文链接： 微信小顺序iOS端怎样停息animated动画
