用CSS的transiton过渡简单写个抽奖转盘

项目需求，需要写一个类似于抽奖的转盘，先看效果图：

动画.gif

有很多活动相关的项目也许会用到抽奖的一个转盘

后台给中奖奖品的信息，前端工程师要对应让指针指到对应奖品，并且还需要指针的转动效果（指针不动，转盘转动同理）
为了确保项目的安全，我就写上部分代码，该部分代码仅涉及到如何指向对应奖品和一个动画的过渡：

HTML方面：

<div class="lottory-bg">
           <div class="start" ref="goStart" @click="startPrize"></div>
           <div class="text" @click="startPrize"></div>
</div>

如何使指针指向对应奖品

此时已经通过后台给的数据知道了用户的奖品
设定一个angle（绝对角度），即最终相对于静止指针的旋转角度

                 if (that.myPrize.prizeId === 'xilingxueshan') {
                       angle = 0;
                       this.optionContent = '西岭雪山VIP套票';
                    } else if (that.myPrize.prizeId ===  'shiyuanhuafei') {
                        angle = 60;
                        this.optionContent = '10元话费';
                    } else if (that.myPrize.prizeId ===  'wuyuanhuafei') {
                        angle = 120;
                        this.optionContent = '5元话费';
                    } else if (that.myPrize.prizeId === 'liangyuanhuafei') {
                        angle = 180;
                        this.optionContent = '2元话费';
                    } else if (that.myPrize.prizeId === 'yibaiyuanhuafei' ) {
                        angle = 300;
                        this.optionContent = '100元话费';
                    } else if (that.myPrize.prizeId ===  'meiyouzhongjiang') {
                        angle = 240;
                    } else {
                        return false;
                    }

可以自己设定绝对角度+ 360的倍速来控制转盘需要转的圈数
最后的绝对角度才是决定对应奖品的关键。

const ang = parseInt(that.count) * 3600 + parseInt(angle); // 多转几圈

可以利用插槽$refs来控制节点goStartt的CSS样式即：
transform（旋转角度）和 transition（过渡）

    that.$refs.goStart.style.transform = `rotate(${ang}deg)` // 旋转的度数;
    that.$refs.goStart.style.transition = 'all 8s'; // 旋转过程过渡的时间

在弹框出来后点击确定记得重置指针角度

      this.$refs.goStart.style.transform = `rotate(0deg)`;
      this.$refs.goStart.style.transition = 'all .1s';