在知道有animation-play-state這個animation的引數時，我內心是激動的。在得知iOS端並不支援時，一股涼意襲來
animation-play-state
先來介紹一下今天的主角animation-play-state
animation-play-state CSS 屬性定義一個動畫是否執行或者暫停。可以通過查詢它來確定動畫是否正在執行。另外，它的值可以被設定為暫停和恢復的動畫的重放。
恢復一個已暫停的動畫，將從它開始暫停的時候，而不是從動畫序列的起點開始在動畫。
在MDN文件中瞭解到，這是一個實驗中的功能，但是其作用還是強大的。既可以控制/獲取元素的動畫狀態（paused，running）
所以，這個animation的引數用來控制動畫的播放狀態再合適不過了。畫外音：你還沒考慮相容性呢！對！就是這個相容性問題。在chrome上這個引數是可以支援的，但是iOS裝置上就不支援了...嘆息。
在iOS上的處理
當然不能因為相容性問題就不用這個引數了，當然不能讓每個iOS使用者去下載一個chrome瀏覽器，當然...
那我們怎麼解決呢？？？用JS
通過Window.getComputedStyle()方法，我們可以獲取元素實時的style的CSSStyleDeclaration物件，這個物件表示CSS屬性鍵值對的集合。也就是說我們使用這個方法可以獲取一個正在進行動畫的元素當前的style值。
PS:關於Window.getComputedStyle()方法的值可以在MDN上了解到，這裡不展開敘述。給出一個語法的例子（摘自MDN）
let style = window.getComputedStyle(element, [pseudoElt]);
複製程式碼那麼具體要怎麼做呢？
實現
See the Pen animation-play-state by luogao (@luogao) on CodePen.
程式碼已經在上面的codepen預覽中展示啦，如果現實不來請點這裡?Roy Luo's codepen
大致解釋一下就是：
在元素的外層的包裹元素上新增獲取到的執行動畫的元素的style計算屬性，從而讓執行動畫的元素暫停下來。
那麼在微信小程式中又是如何呢？
其實，最先遇到這個問題是在做小程式的時候。一個播放器的介面，中間一張專輯圖片。在圓形的黑膠唱片邊框中旋轉。當播放停止，圖片也同時停止旋轉。停在當前旋轉的位置
當時看似簡單的一個需求，使用了animation-play-state並且與預期一樣達到了效果，在模擬器中。
沒錯，洋洋得意的以為完成了需求，結果真機（iOS）上一測試，原形畢露。
當時看到小程式的官方社群中提到說iOS不支援這個animation-play-state?♂️?♂️?♂️?
幸得殘陽映楓紅在sf的一個問題中的回答讓我找到了方向。感謝之～
值得在最後前一提的是
這裡有三個小程式的坑要提一下
- nodesRef.fields(fields, [callback])這個方法需要在基本庫2.1.0（個人感覺不是個該著重考慮的問題）
- 這個方法是非同步的（自行感受）
- 應該區分iOS和安卓裝置，進行不同的處理。能不用這個nodesRef.fields方法儘量不要用～
參考
本文作者： Roy Luo
本文連結： 微信小程式iOS端如何暫停animated動畫