添加示例項(xiàng)目地址：https://gitee.com/bartflyian/awardResult-animation/tree/master/award_animation

記錄開(kāi)發(fā)問(wèn)題，溫故而知新。

這次遇到需求想要做一個(gè)開(kāi)獎(jiǎng)結(jié)果的動(dòng)畫(huà)效果。本來(lái)認(rèn)為用css的transition就可以全部完成，但要求最后一個(gè)結(jié)果需要3種不同的呈現(xiàn)效果。最后的結(jié)果如下：

其中一種（中間停頓后倒回）gif錄制的有些卡頓的感覺(jué)

OK，最基本的是先寫(xiě)5個(gè)方框，并將其背景圖設(shè)置為

背景圖

這個(gè)是具體的html和css（init值是判斷是否首次加載組件，避免在首次加載時(shí)觸發(fā)動(dòng)畫(huà)）

5個(gè)方格的樣式

第5個(gè)格子的keyframes動(dòng)畫(huà)樣式 ($num 這個(gè)標(biāo)識(shí)點(diǎn)是我業(yè)務(wù)上需要才添加的，styleNum就是用來(lái)區(qū)分需求里的3種不同動(dòng)畫(huà)效果，因?yàn)楹竺媸莿?dòng)態(tài)修改樣式，所以keyframes的樣式值是初始值而已，具體的在下面setKeyframes（）中設(shè)置樣式)

接下來(lái)是按動(dòng)畫(huà)的開(kāi)始結(jié)束來(lái)：

當(dāng)前端監(jiān)聽(tīng)收到結(jié)果改變時(shí)，執(zhí)行動(dòng)畫(huà)函數(shù)animation（），貼下代碼

額，截得不好，和下面一張合并的

那么比較復(fù)雜的就是findkeyframesrule和setkeyframes這兩個(gè)了，這兩個(gè)是為了最后一格的keyframe動(dòng)畫(huà)可以動(dòng)態(tài)修改樣式值（如果有其他方法可以去動(dòng)態(tài)修改keyframe動(dòng)畫(huà)的值，可以留言告訴我）

setKeyframes的分兩個(gè)圖截

篇幅有點(diǎn)長(zhǎng)可能看的蒙，總的來(lái)說(shuō)就是：

監(jiān)聽(tīng)到結(jié)果改變 ---> 根據(jù)結(jié)果值動(dòng)態(tài)修改樣式（前4格用$refs追蹤到節(jié)點(diǎn)直接修改style,最后一格因?yàn)橛玫絢eyframes動(dòng)畫(huà)，所以還需要用findkeyframesrule和setkeyframes去修改樣式表的值）---> 動(dòng)畫(huà)結(jié)束后刪掉class(animation)

瀏覽過(guò)程中有哪些問(wèn)題可以一起探討解決