添加示例項(xiàng)目地址：https://gitee.com/bartflyian/awardResult-animation/tree/master/award_animation
記錄開發(fā)問題赊淑，溫故而知新溜腐。
這次遇到需求想要做一個(gè)開獎(jiǎng)結(jié)果的動(dòng)畫效果棋电。本來認(rèn)為用css的transition就可以全部完成艾疟，但要求最后一個(gè)結(jié)果需要3種不同的呈現(xiàn)效果蛙奖。最后的結(jié)果如下：
OK，最基本的是先寫5個(gè)方框瓣履，并將其背景圖設(shè)置為
這個(gè)是具體的html和css（init值是判斷是否首次加載組件衰絮，避免在首次加載時(shí)觸發(fā)動(dòng)畫）
5個(gè)方格的樣式
第5個(gè)格子的keyframes動(dòng)畫樣式 ($num 這個(gè)標(biāo)識(shí)點(diǎn)是我業(yè)務(wù)上需要才添加的，styleNum就是用來區(qū)分需求里的3種不同動(dòng)畫效果，因?yàn)楹竺媸莿?dòng)態(tài)修改樣式坛缕，所以keyframes的樣式值是初始值而已墓猎，具體的在下面setKeyframes（）中設(shè)置樣式)
接下來是按動(dòng)畫的開始結(jié)束來：
當(dāng)前端監(jiān)聽收到結(jié)果改變時(shí)，執(zhí)行動(dòng)畫函數(shù)animation（）赚楚，貼下代碼
那么比較復(fù)雜的就是findkeyframesrule和setkeyframes這兩個(gè)了宠页，這兩個(gè)是為了最后一格的keyframe動(dòng)畫可以動(dòng)態(tài)修改樣式值（如果有其他方法可以去動(dòng)態(tài)修改keyframe動(dòng)畫的值搀军，可以留言告訴我）
setKeyframes的分兩個(gè)圖截
篇幅有點(diǎn)長(zhǎng)可能看的蒙，總的來說就是：
監(jiān)聽到結(jié)果改變 ---> 根據(jù)結(jié)果值動(dòng)態(tài)修改樣式（前4格用$refs追蹤到節(jié)點(diǎn)直接修改style,最后一格因?yàn)橛玫絢eyframes動(dòng)畫勇皇，所以還需要用findkeyframesrule和setkeyframes去修改樣式表的值）---> 動(dòng)畫結(jié)束后刪掉class(animation)
瀏覽過程中有哪些問題可以一起探討解決
