vue.js css3 开奖动画

添加示例项目地址：https://gitee.com/bartflyian/awardResult-animation/tree/master/award_animation

记录开发问题，温故而知新。

这次遇到需求想要做一个开奖结果的动画效果。本来认为用css的transition就可以全部完成，但要求最后一个结果需要3种不同的呈现效果。最后的结果如下：

其中一种（中间停顿后倒回）gif录制的有些卡顿的感觉

OK，最基本的是先写5个方框，并将其背景图设置为

背景图

这个是具体的html和css（init值是判断是否首次加载组件，避免在首次加载时触发动画）

5个方格的样式

第5个格子的keyframes动画样式 ($num 这个标识点是我业务上需要才添加的，styleNum就是用来区分需求里的3种不同动画效果，因为后面是动态修改样式，所以keyframes的样式值是初始值而已，具体的在下面setKeyframes（）中设置样式)

---

接下来是按动画的开始结束来：

当前端监听收到结果改变时，执行动画函数animation（），贴下代码

额，截得不好，和下面一张合并的

那么比较复杂的就是findkeyframesrule和setkeyframes这两个了，这两个是为了最后一格的keyframe动画可以动态修改样式值（如果有其他方法可以去动态修改keyframe动画的值，可以留言告诉我）

setKeyframes的分两个图截

篇幅有点长可能看的蒙，总的来说就是：

监听到结果改变 ---> 根据结果值动态修改样式（前4格用$refs追踪到节点直接修改style,最后一格因为用到keyframes动画，所以还需要用findkeyframesrule和setkeyframes去修改样式表的值）---> 动画结束后删掉class(animation)

浏览过程中有哪些问题可以一起探讨解决