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
}
上一篇:Communication API


下一篇:Garbage Disposal(模拟垃圾装垃圾口袋)