我們要實現(xiàn)動畫的播放和暫停，animation-play-state 在安卓端可以使用厅缺，但是在 ios 中不起作用疟赊，這時可以使用 js 來實現(xiàn)相同效果。
原理
通過 js 獲取當前元素的 transform 屬性止后，通過添加、移除 class 實現(xiàn) animation 動畫失暴。
由于移除 animation 后坯门，改變的效果會還原，所以給當前元素添加一個和當前元素同等大小的父元素逗扒，讓父元素得到改變值。
假設欠橘，我們要實現(xiàn)元素<div class="img"></div>的旋轉矩肩，使用到了 transform 屬性
首先需要加一個wrap包裹，即
<div class="wrap">
<div class="img">➤</div>
</div>
隨后寫 CSS，通過添加 class 實現(xiàn)動畫
@keyframes circle {
100%{
transform: rotate(360deg);
}
}
.wrap,.img {
width: 50px;
height: 50px;
} /*父元素和子元素同等大小*/
.img {
background: red; /*便于觀察*/
}
.playing {
animation: circle 10s infinite linear;
}
最后黍檩，通過 JavaScript 實現(xiàn)效果叉袍，這里使用 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))
//由于父元素沒有動畫刽酱，所以每次賦值的時候喳逛，需要將上次父元素的狀態(tài)加上
$img.removeClass('playing')
isPlaying = false
}
