在知道有 animation-play-state 這個(gè)animation的參數(shù)時(shí),我內(nèi)心是激動(dòng)的。在得知iOS端并不支持時(shí),一股涼意襲來
先來介紹一下今天的主角 animation-play-state
animation-play-stateCSS屬性定義一個(gè)動(dòng)畫是否運(yùn)行或者暫停??梢酝ㄟ^查詢它來確定動(dòng)畫是否正在運(yùn)行。另外,它的值可以被設(shè)置為暫停和恢復(fù)的動(dòng)畫的重放。
恢復(fù)一個(gè)已暫停的動(dòng)畫,將從它開始暫停的時(shí)候,而不是從動(dòng)畫序列的起點(diǎn)開始在動(dòng)畫。
在MDN文檔中了解到,這是一個(gè)實(shí)驗(yàn)中的功能,但是其作用還是強(qiáng)大的。既可以控制/獲取元素的動(dòng)畫狀態(tài)(paused,running)
所以,這個(gè)animation的參數(shù)用來控制動(dòng)畫的播放狀態(tài)再合適不過了。畫外音:你還沒考慮兼容性呢!對(duì)!就是這個(gè)兼容性問題。在chrome上這個(gè)參數(shù)是可以支持的,但是iOS設(shè)備上就不支持了...嘆息。
當(dāng)然不能因?yàn)榧嫒菪詥栴}就不用這個(gè)參數(shù)了,當(dāng)然不能讓每個(gè)iOS用戶去下載一個(gè)chrome瀏覽器,當(dāng)然...
那我們?cè)趺唇鉀Q呢???用JS
通過 Window.getComputedStyle() 方法,我們可以獲取元素實(shí)時(shí)的 style 的 CSSStyleDeclaration 對(duì)象,這個(gè)對(duì)象表示CSS屬性鍵值對(duì)的集合。也就是說我們使用這個(gè)方法可以獲取一個(gè)正在進(jìn)行動(dòng)畫的元素當(dāng)前的 style 值。
PS:關(guān)于 Window.getComputedStyle() 方法的值可以在MDN上了解到,這里不展開敘述。給出一個(gè)語法的例子(摘自MDN)
let style = window.getComputedStyle(element, [pseudoElt]); 復(fù)制代碼
那么具體要怎么做呢?
See the Penanimation-play-state by luogao (@luogao) onCodePen.
代碼已經(jīng)在上面的codepen預(yù)覽中展示啦,如果現(xiàn)實(shí)不來請(qǐng)點(diǎn)這里:point_right:Roy Luo's codepen
大致解釋一下就是:
在元素的外層的包裹元素上添加獲取到的執(zhí)行動(dòng)畫的元素的 style 計(jì)算屬性,從而讓執(zhí)行動(dòng)畫的元素暫停下來。
其實(shí),最先遇到這個(gè)問題是在做小程序的時(shí)候。一個(gè)播放器的界面,中間一張專輯圖片。在圓形的黑膠唱片邊框中旋轉(zhuǎn)。當(dāng)播放停止,圖片也同時(shí)停止旋轉(zhuǎn)。 停在當(dāng)前旋轉(zhuǎn)的位置
當(dāng)時(shí)看似簡(jiǎn)單的一個(gè)需求,使用了 animation-play-state 并且與預(yù)期一樣達(dá)到了效果, 在模擬器中 。
沒錯(cuò),洋洋得意的以為完成了需求,結(jié)果真機(jī)(iOS)上一測(cè)試,原形畢露。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)