資訊專欄INFORMATION COLUMN
摘要：可以通過查詢它來確定動(dòng)畫是否正在運(yùn)行。另外，它的值可以被設(shè)置為暫停和恢復(fù)的動(dòng)畫的重放。在文檔中了解到，這是一個(gè)實(shí)驗(yàn)中的功能，但是其作用還是強(qiáng)大的。也就是說我們使用這個(gè)方法可以獲取一個(gè)正在進(jìn)行動(dòng)畫的元素當(dāng)前的值。
在知道有animation-play-state這個(gè)animation的參數(shù)時(shí)，我內(nèi)心是激動(dòng)的。在得知iOS端并不支持時(shí)，一股涼意襲來
animation-play-state先來介紹一下今天的主角animation-play-state
animation-play-state?CSS?屬性定義一個(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è)備上就不支持了...嘆息。
在iOS上的處理當(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]);
那么具體要怎么做呢？
實(shí)現(xiàn)See the Pen animation-play-state by luogao (@luogao) on CodePen.
代碼已經(jīng)在上面的codepen預(yù)覽中展示啦，如果現(xiàn)實(shí)不來請(qǐng)點(diǎn)這里
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/96401.html
摘要：項(xiàng)目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代碼，更多關(guān)于小程序的內(nèi)容可見微信小程序開發(fā)文檔小程序框架結(jié)構(gòu)微信小程序的入口是根目錄下的它們分別描述的小程序的主題邏輯和公共配置部分。 剛進(jìn)公司不久，因?yàn)楣静块T年后業(yè)務(wù)拓展的關(guān)系，可能在年后會(huì)被分配到公司的微信公眾號(hào)組做小程序相關(guān)的開發(fā)工作，因此寫了個(gè)微信小程序wx-audio踩坑。目前還有一些功能沒有寫完：如返...
摘要：為了提高自己，最近在學(xué)習(xí)微信小程序，選題是仿網(wǎng)易云音樂。查文檔發(fā)現(xiàn)，小程序中圖片加載完成后，有一個(gè)加載完成事件。前者在微信客戶端版本就不開始維護(hù)了，后者低版本需做兼容處理。目前還有一些功能暫未實(shí)現(xiàn)，會(huì)在以后繼續(xù)完善項(xiàng)目，繼續(xù)學(xué)習(xí)。 為了提高自己，最近在學(xué)習(xí)微信小程序，選題是仿網(wǎng)易云音樂。期間踩過了大把的坑，bug出現(xiàn)的難受和解決bug歡喜，一直是伴隨我階段性學(xué)習(xí)這個(gè)項(xiàng)目的心情。初步完成...
摘要：本期大綱餅圖繪制如何添加動(dòng)畫效果使用構(gòu)建項(xiàng)目相關(guān)閱讀在微信小程序中繪制圖表在微信小程序中繪制圖表關(guān)注我的項(xiàng)目查看完整代碼。 本期大綱 1、餅圖繪制2、如何添加動(dòng)畫效果3、使用rollup構(gòu)建項(xiàng)目 相關(guān)閱讀：在微信小程序中繪制圖表（part1）在微信小程序中繪制圖表（part2） 關(guān)注我的 github 項(xiàng)目 查看完整代碼。 很久沒更新了，最近事情比較多，今天來把坑填上！ 餅圖繪制 ...
摘要：微信小程序?qū)W習(xí)仿嗶哩嗶哩制作的小程序待完善項(xiàng)目預(yù)覽圖小程序大改變之前就被朋友安利使用小程序，最近接近了小程序，發(fā)現(xiàn)了它竟然帶來了一場(chǎng)大革命。 微信小程序?qū)W習(xí) ?仿嗶哩嗶哩制作的小程序（待完善） 項(xiàng)目預(yù)覽圖 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改變？ 之前就被朋友安利使用小程序，最近接近了...
閱讀 2238·2021-11-22 09:34
閱讀 1347·2021-10-11 10:59
閱讀 4448·2021-09-22 15:56
閱讀 3304·2021-09-22 15:08
閱讀 3414·2019-08-30 14:01
閱讀 785·2019-08-30 11:16
閱讀 1139·2019-08-26 13:51
閱讀 2920·2019-08-26 13:43
