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

}