IOS 上 animation-play-state 失效的解决

animation-play-state有两个值：running和pause。但是在IOS系统上，这个动画属性失效，也就是说无法暂停动画在当前的运动位置，在制作音乐旋转图标时就会遇到问题。

解决方案：用JS写一个状态叠加代码。
html代码:

<div class="wp">
  <img src="https://sfault-avatar.b0.upaiyun.com/408/449/4084493968-55c2142e12b21_huge256">
</div>
<p class="desc">点击图片running/pause</p>

css代码：

.wp > img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
}

.wp {
  margin: 0 auto;
}

.desc {
  margin: 20px auto 0;
  text-align: center;
}

js代码

var isPlaying = false;

var container = document.querySelector('.wp');
var image = container.querySelector('img');

image.addEventListener('click', function bindEvent() {
  isPlaying ? pause() : play();
});

function pause() {
  isPlaying = false;
  var iTransform = getComputedStyle(image).transform;
  var cTransform = getComputedStyle(container).transform;
  container.style.transform = cTransform === 'none'
     ? iTransform
     : iTransform.concat(' ', cTransform);
  image.classList.remove('animate');
}

function play() {
  isPlaying = true;
  image.classList.add('animate');
}

原理很简单，就是把当前动画的运动状态赋值给改元素的父级元素，这样即使移除了该元素的动画属性，也照样会保持当前的运动状态。当下次在运动的时候，用concat将运动状态叠加，