animation-play-state 在 ios 中不生效的解决办法（JS篇）

我们要实现动画的播放和暂停，animation-play-state 在安卓端可以使用，但是在 ios 中不起作用，这时可以使用 js 来实现相同效果。

原理

通过 js 获取当前元素的 transform 属性，通过添加、移除 class 实现 animation 动画。
由于移除 animation 后，改变的效果会还原，所以给当前元素添加一个和当前元素同等大小的父元素，让父元素得到改变值。

假设，我们要实现元素<div class="img"></div>的旋转，使用到了 transform 属性
首先需要加一个wrap包裹，即

<div class="wrap">
  <div class="img">&#</div>
</div>

随后写 CSS，通过添加 class 实现动画

@keyframes circle {
  %{
    transform: rotate(360deg);
  }
}

.wrap,.img {
  width: 50px;
  height: 50px;
}  /*父元素和子元素同等大小*/

.img {
  background: red;  /*便于观察*/
}

.playing {
  animation: circle 10s infinite linear;
}

最后，通过 JavaScript 实现效果，这里使用 jQuery

let $img = $('.img')
let isPlaying = false

$img.on('click',function(){
  !isPlaying ? running() : paused()
})

function running(){
  $img.addClass('playing')
  isPlaying = true
}

function paused(){
  let siteImg = $img.css('transform')  //获取当前元素的动画改变，transform的值
  let siteWp = $('.wrap').css('transform')
  $('.wrap').css('transform',siteWp === 'none' ? siteImg : siteImg.concat('',siteWp))
//由于父元素没有动画，所以每次赋值的时候，需要将上次父元素的状态加上
  $img.removeClass('playing')
  isPlaying = false
}