在寫一個(gè)vue音頻組件。樣式上會顯示音頻的進(jìn)度條，播放的時(shí)候，進(jìn)度條會順暢的進(jìn)行向前滾動(dòng)，當(dāng)用戶點(diǎn)擊暫停的時(shí)候會暫停進(jìn)度條，點(diǎn)擊繼續(xù)進(jìn)度條繼續(xù)走，知道播放完成。

1.css transition動(dòng)畫實(shí)現(xiàn)方案。使用了transition實(shí)現(xiàn)，當(dāng)只有一個(gè)音頻組件的時(shí)候沒任何問題，但是當(dāng)一個(gè)頁面存在多個(gè)音頻的時(shí)候，transition狀態(tài)會在多個(gè)音頻組件的暫停/播放狀態(tài)有問題，瀏覽器只會保存一個(gè)組件示例的transition是正確的，其他音頻的tansition會有沖突問題，可以理解為瀏覽器的機(jī)制bug。

2.使用定時(shí)器實(shí)現(xiàn)動(dòng)畫。如果音頻時(shí)長為4s，但是整個(gè)音頻進(jìn)度條有100px，那么js實(shí)現(xiàn)的動(dòng)畫就會顯得比較卡頓，沒有css那么順暢，體驗(yàn)不是很好。

有沒有比較好的的實(shí)現(xiàn)方式，有考慮使用vue transition實(shí)現(xiàn)，但是手機(jī)兼容性是個(gè)問題，特別是安卓4.4及以下系統(tǒng)手機(jī)卡頓嚴(yán)重。