在知(zhi)道(dao)有 animation-play-state 這個animation的參(can)數時，我(wo)內(nei)心是激動的。在得知(zhi)iOS端并不支持時，一股涼意襲來
先來介紹一下今天的主(zhu)角(jiao) animation-play-state
animation-play-stateCSS屬性(xing)定(ding)義一(yi)個(ge)動(dong)畫(hua)是否(fou)運行或者(zhe)暫停。可(ke)以通過查(cha)詢它(ta)(ta)來確定(ding)動(dong)畫(hua)是否(fou)正在(zai)運行。另(ling)外，它(ta)(ta)的值可(ke)以被設置為(wei)暫停和(he)恢復的動(dong)畫(hua)的重放(fang)。
恢復(fu)一個已暫停的動畫，將從它開(kai)始(shi)暫停的時候，而不是從動畫序列(lie)的起點開(kai)始(shi)在(zai)動畫。
在MDN文檔中(zhong)了解到(dao)，這是(shi)一個實驗中(zhong)的(de)功能，但(dan)是(shi)其作(zuo)用還是(shi)強大的(de)。既可以(yi)控(kong)制(zhi)/獲取元素的(de)動畫狀態(tai)（paused，running）
所以(yi)，這(zhe)個animation的參數(shu)用(yong)來控制動(dong)畫的播放狀(zhuang)態再合適不(bu)過了。畫外音：你還沒考慮兼容(rong)性(xing)呢(ni)！對(dui)！就是(shi)這(zhe)個兼容(rong)性(xing)問題。在(zai)chrome上(shang)這(zhe)個參數(shu)是(shi)可以(yi)支(zhi)(zhi)持的，但是(shi)iOS設備上(shang)就不(bu)支(zhi)(zhi)持了...嘆息。
當(dang)然不(bu)能(neng)因為(wei)兼(jian)容(rong)性問題就(jiu)不(bu)用這個(ge)參數(shu)了，當(dang)然不(bu)能(neng)讓(rang)每個(ge)iOS用戶去(qu)下載(zai)一個(ge)chrome瀏覽器，當(dang)然...
那我們怎么解決呢(ni)？？？用JS
通過 Window.getComputedStyle() 方法，我(wo)們可以獲取元素實時的(de) style 的(de) CSSStyleDeclaration 對象(xiang)，這(zhe)個對象(xiang)表示CSS屬(shu)性鍵值對的(de)集合。也就(jiu)是說我(wo)們使用這(zhe)個方法可以獲取一個正(zheng)在(zai)進(jin)行動畫的(de)元素當前的(de) style 值。
PS:關(guan)于 Window.getComputedStyle() 方(fang)法(fa)(fa)的值(zhi)可以在MDN上了(le)解到(dao)，這里(li)不展(zhan)開(kai)敘述(shu)。給出一個語法(fa)(fa)的例子（摘自MDN）
let style = window.getComputedStyle(element, [pseudoElt]); 復制代碼
那么具(ju)體要怎么做呢(ni)？
See the Penanimation-play-state by luogao (@luogao) onCodePen.
代碼已經在上面的codepen預覽中展示啦，如(ru)果(guo)現(xian)實不來請(qing)點這里:point_right:Roy Luo's codepen
大致解釋一下(xia)就是：
在元素(su)的(de)外層的(de)包裹元素(su)上添加獲取到的(de)執行(xing)動(dong)畫(hua)的(de)元素(su)的(de) style 計算(suan)屬性(xing)，從而讓執行(xing)動(dong)畫(hua)的(de)元素(su)暫停下來。
其實，最先遇到這(zhe)個(ge)問題是在(zai)做小程序的時(shi)候。一(yi)個(ge)播放(fang)器(qi)的界(jie)面，中(zhong)間一(yi)張專輯圖片。在(zai)圓形(xing)的黑膠唱(chang)片邊框中(zhong)旋轉。當播放(fang)停止(zhi)，圖片也同時(shi)停止(zhi)旋轉。 停在(zai)當前旋轉的位置
當時看似簡單的一個需求，使用了 animation-play-state 并且與預期一樣達到了效果， 在(zai)模擬器(qi)中 。
沒錯，洋洋得意的以為完成了需求，結果真機(ji)（iOS）上一測試，原形畢露。
